canvas基础绘图

canvas 可以做什么？

使用canvas 可以绘制复杂图形、做动画、处理图像、开发游戏、处理视频…

canvas 是什么？

• h5新增canvas 2d 绘图功能
• 在html中：
  • canvas是html标签
  • canvas 可以理解为一张画布
  • 我们需要用js在canvas里绘制图形

注意事项：
设置canvas dom 元素的 width、height 属性
不要使用css 设置canvas 尺寸
兼容ie9及其以上
canvas 尺寸不能过大（尽量控制在4000以内）
canvas具体极限值因浏览器、平台不同而不同。

获取canvas 上下文对象的方法：canvas.getContext(“2d”);

canvas 绘图步骤

1. 建立canvas 画布
2. 通过canvas画布获取上下文对象，也就是画笔
3. 设置画笔颜色
4. 设置图形形状
5. 绘制图形

canvas 画布的坐标系和栅格

• canvas的坐标系是二维直角坐标系，由X轴和Y轴组成
• 横向的轴为X轴，越网右越大；竖向的轴为Y轴，越往下越大
• canvas坐标系是以像素的宽度为基底的
• 栅格就是如图中4个格子，每个格子就是一个像素，像素具有rgba数据
• 像素的数量等于canvas画布的宽度乘以高度。
  

矩形的绘图方法

填充矩形方法：fillRect(x,y,w,h)
描边矩形方法：strokeRect(x,y,w,h)
清理矩形方法：clearRect(x,y,w,h)

绘制路径的步骤

1. 开始建立路径：beginPath()
2. 向路径集合中添加子路径：
   [
   moveTo(x,y);形状；closePath()可选，
   moveTo(x,y);形状；closePath()可选，
   moveTo(x,y);形状；closePath()可选，
   ]
3. 显示路径：填充fill(),描边stroke()

子路径的形状

• 直线：lineTo(x,y);
• 圆弧：arc(x,y,半径，开始弧度，结束弧度，方向)
• 切线弧度：arcTo(x1,y1,x2,y2,半径)
• 二次贝塞尔曲线：quadraticCurverTo(cpx1,cpy1,x,y)
• 三次贝塞尔曲线：bezierCurverTo(cpx1,cpy1,cpx2,cpy2,x,y)
• 矩形：rect(x,y,w,h)

圆弧：arc(x,y,半径，开始弧度，结束弧度，方向)

切线弧度：arcTo(x1,y1,x2,y2,半径)

二次贝塞尔曲线：quadraticCurverTo(cpx1,cpy1,x,y)

二次贝塞尔曲线：quadraticCurverTo(cpx1,cpy1,x,y)

图形的着色区域

描边区域：strokeStyle 代表了描边样式，描边区域的绘制方法是stroke(),strokeRect()或者strokeText()。
填充区域：fillStyle 代表了填充样式，填充区域的绘制方法是fill(),fillRect(),或者fillText().

图形的着色方式

• 纯色
• 渐变
• 纹理

纯色

书写方式：（与css一致）：

• red
• #000000
• rgb(r,g,b)
• rgba(r,g,b,a)

赋值方式

• ctx.fillStyle = “red”
• ctx.trokeStyle = “rgb(r,g,b)”

渐变

建立渐变对象的方式：

• 线性渐变：gradient=createLinearGradient(x1,y1,x2,y2)
• 径向渐变：gradient=createRadialGradient(x1,y1,r1,x2,y2,r2)
  定义渐变的颜色节点：
• gradient.addColorStop(position,color)
  赋值方式：
• ctx.fillStyle = gradient
• ctx.strokeStyle = gradient

线性渐变

径向渐变

纹理

影响描边样式的因素

• strokeStyle：描边的颜色
• lineWidth：描边宽
• lineCap：描边端点样式
• lineJoin：描边拐角样式
• miterLimit：拐角最大厚度（只使用与lineJoin="miter"的情况）
• setLineDash(segments)：将描边设置为虚线，可以通过getLineDash()方法获取虚线样式
• lineDashOffset：虚线的偏移量

lineWidth

lineCap

lineJoin

miterLimit

setLineDash(segments)

lineDashOffset

投影的属性

• 偏移位置
  • shadowOffsetX = float
  • shadowOffsetY = float
• 模糊度：shadowBlur = float
• 颜色：shadowColor = color

注意

在绘制描边图形和填充图形的时候，都需要执行相应的方法，比如：路径的fill()、stroke()方法
而绘制投影时，则不需要任何方法，只要设置相应属性即可，这样在之后绘制图形的时候都会自带投影，无论这个图形是描边图形还是填充图形。