canvas 应用

  • 绘制复杂图形
  • 做动画
  • 处理图像，视频
  • 开发游戏

canvas 是啥

  • h5新增的canvas 2d绘图功能
  • 是一种HTML标签，可以理解为一张画布，需要用js在canvas里绘制图像

canvas尺寸设置

  • canvas默认尺寸宽300，高150
  • canvas尺寸需要4000以下
  • canvas dom元素 width height不要使用css设置
//方法一
<canvas width='600' height='700'><canvas/>
 //方法二
  <script>
  	const canvas=document.getElementById('canvas')
    canvas.width=300
    canvas.height=150
  </script>

浏览器支持

alt

canvas的坐标系

  • canvas的坐标系是二维直角坐标系，X越往右越大，Y越往下越大
  • canvas坐标系是以像素的宽高为基底的
  • 像素的数量等于画布的宽度乘高度 alt

矩形绘制方法

  • 填充矩形
fillRect(x,y,w,h)
  • 描边矩形
strokeRect(x,y,w,h)
//描边颜色
ctx.strokeStyle='red'
//描边宽度,居中描边
ctx.lineWidth=20
ctx.strokeRect(
	20,20,40,50
)
  • 清理矩形
clearRect(x,y,w,h)

alt

绘制路径的步骤

  • 开始建立路径：beginPath()
  • 向路径集合中添加子路径： [ moveTo(x,y);形状;closePath()可选 moveTo(x,y);形状;closePath()可选 moveTo(x,y);形状;closePath()可选 ]
  • 显示路径：填充fill(),描边stroke()
  • 子路径的形状
直线：lineTo(x,y);lineTo(x,y);lineTo(x,y)
圆弧：arc(x,y,半径,开始弧度,结束弧度,方向)
切线圆弧：arcTo(x1,y1,x2,y2,半径)
二次贝塞尔曲线：quadraticCurveTo(cpx1,cpy1,x,y)
三次贝塞尔曲线：bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y)
矩形：rect(x,y,w,h)

canvas样式

  1. 着***域
  • 描边区域 strokeStyle
stroke()
strokeRect()
strokeText()
  • 填充区域 fillStyle
fill()
fillRect()
fillText()
  1. 渐变
  • 线性渐变
//创建
gradient=createLinearGradient(x1,y1,x2,y2)
//定义渐变颜色
gradient.addColorStop(position,color)
//赋值
ctx.fillStyle=gradient

alt

  • 径向渐变
//创建
gradient=createRadialGradient(x1,y1,r1,x2,y2,r2)
//定义渐变颜色
gradient.addColorStop(position,color)
//赋值
ctx.strokeStyle=gradient

alt 3. 纹理

//建立对象
pattern=context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat")
//为对象赋值
ctx.fillStyle=pattern
ctx.strokeStyle=pattern
  1. 描边
  • lineCap描边端点样式
butt 没有端点，默认
round 圆形端点
square 方形端点，长一点
  • lineJoin 拐角样式
miter 尖角，默认
// miterLimit =1避免拐角厚度过大
round 圆角
bevel 切角
  • setLineDash 虚线
//相间
ctx.setLineDash([60,90])
ctx.setLineDash([60,90,120])
// 偏移
ctx.lineDashOffset=-60 //向右偏移60
  • 投影
//偏移位置
shadowOffsetX=float
shadowOffsetY=float
//模糊度
shadowBlur=float
//颜色
shadowColor=color