canvas学习笔记

canvas 学习笔记

1. canvas不建议在样式中设置尺寸，会导致画布中内容同步放大。

2. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TihUgnoN-1589252734175)(C:\Users\86177\AppData\Roaming\Typora\typora-user-images\image-20200506211420624.png)]

3. 默认宽度1px，默认颜色黑色，

   线条存在粗细不一问题：对齐的点是线的中心位置 会把线分成两个0.5排序，显示的是会不饱和增加宽度

   解决方法：前后移动0.5px

4. 线条颜色：ctx.strokeStyle=‘red’

   线条尺寸：ctx.lineWidth=10

   1. 开启新路径：ctx.beginPath() 可以解决样式覆盖问题

5. 填充：ctx.fill() 默认黑色

6. 闭合路径：ctx.closePath()

7. 填充规则：非零环绕：

   1. 看一块区域是否填充
   2. 从这个区域拉一条直线
   3. 看和这条直线相交的轨迹
   4. 如果顺时针轨迹+1
   5. 如果逆时针轨迹-1
   6. 所有的轨迹值相加
   7. 非零则填充
   8. 为零则不填充

8. 画笔状态：

   1. lineWidth:画笔宽度，默认1px
   2. lineCap：线末端类型：1.butt（默认）2.square(方形) 3. round（圆形）
   3. lineJoin：相交线的拐点：1.miter（默认）2.round（圆形）3.bevel（削尖）
   4. strokeStyle：线条颜色
   5. fillStyle：填充颜色
   6. setLineDash（[实线，虚线，实线······]）：设置虚线,循环列表中参数
   7. getLineDash（）：获取虚线宽度集合，获取实线虚线不重复的宽度集合
   8. lineDashOffset：设置虚线偏移量（负值向右偏移）

9. 矩形

   1. 填充矩形：ctx.fillRect(x,y,width,height)

      颜色：ctx.fillStyle=“color”

   2. 描边矩形：ctx.strokeRect(x,y,width,height)

      描边颜色：ctx.strokeStyle=“color”

   3. 清除指定矩形区域:ctx.clearRect(x,y,width,height)

10. 圆形：ctx.arc(x,y,startangel,endangel,bool)

11. 线性渐变

    var linear = ctx.createLinearGradient(x1,y1,x2,y2)
    
    linear.addColorGradient(0-1相对位置，color)
    
    ctx.fillStyle=linear
    
    ctx.fillRect(10,10,100,100)
    
    ctx.strokeRect()
    

12. 绘制图片

    var img = new Image()
    
    img.src = 'url'
    
    img.onload = function （）{
    
       var ptrn = ctx.createPattern(img,'repeat')
    
       ctx.fillStyle = ptrn
    
       ctx.fillRect(0,0,100,100)
    }		//注意，在绘制图像时，一定要确保图像加载完成
    
    

    或者

    img.onload = function () {
        ctx.drawImage(图像，x轴，y轴，宽度，高度，绘制x轴，绘制y轴，绘制宽度，绘制高度)
    }
    

13. 绘制文字

ctx.font = 'font-weight font-style font-size font-family'
ctx.fillText('content',x,y)

文字阴影

ctx.shadowColor = 'color'
ctx.shadowBlur = 10;		//模糊度
ctx.shadowOffsetX = width
ctx.shadowOffsetY = height

14. 图像混合

    目标图像：画布已经存在的图像

    源图像：即将画到画布上的图像

    ctx.globalCompositeOperation = 'source-over'
    
    //source-over:原图像覆盖目标图像
    //destination-over:重叠区域，目标图像覆盖原图像
    //source-atop:只显示与目标图像重叠的部分
    //destination-atop:只显示与源图像重叠的部分
    //source-in:只显示与目标图像重叠部分的源图像，目标图像不显示
    //destination-in：只显示与源图像重写部分的目标图像，源图像不显示
    

15. 图像动画

    1.setIntervar(function(),timeSpace)

    2.window.requestAnimationFrame(move)

    move是自己定义的一个函数

    该函数还需要调用

16. 存储状态ctx. save()

    取出状态ctx.restore()

),timeSpace)

2.window.requestAnimationFrame(move)

  move是自己定义的一个函数

  该函数还需要调用

16. 存储状态ctx. save()

    取出状态ctx.restore()

    存取采用栈结构存取