今天小编跟大家讲解下有关canvas使用注意点总结 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关canvas使用注意点总结 的相关资料，希望小伙伴们看了有所帮助。
1、canvas中文教程https://developer.mozilla.org/zh-CN/docs/Canvas_tutorial 2、canvas默认宽高是300、150 为避免异常 最好使用显示属性添加而不通过css来添加宽高 3、在canvas标签内部添加不支持canvas标签的浏览器的说明 4、通过下面的js代码也能判断浏览器是否支持canvas 复制代码代码如下: var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); // drawing code here } else { // canvas-unsupported code here } 5、canvas只支持一种基本形状的绘制 即矩形 但是其它图形都可以通过canvas路径来绘制 6、绘制矩形有四个函数：rect、fillRect、strokeRect和clearRect 7、beginPath的作用用来开始一个新的路径层 如果不加就表示在原来路径层上绘制 下面两段代码效果是完全不一样的 第一段代码显示两条红线 第二段代码显示一条黑线和一条红线 复制代码代码如下: var ctx = document.getElementById('cvs').getContext('2d'); ctx.beginPath(); ctx.moveTo(100.5,20.5); ctx.lineTo(200.5,20.5); ctx.stroke(); ctx.moveTo(100.5,40.5); ctx.lineTo(200.5,40.5) ctx.strokeStyle = '#f00'; ctx.stroke(); 复制代码代码如下: var ctx = document.getElementById('cvs').getContext('2d'); ctx.beginPath(); ctx.moveTo(100.5,20.5); ctx.lineTo(200.5,20.5); ctx.stroke(); ctx.beginPath(); ctx.moveTo(100.5,40.5); ctx.lineTo(200.5,40.5) ctx.strokeStyle = '#f00'; ctx.stroke(); 8、如果不需要路径闭合 closePath可以不用 如果使用了fill则路径则会自动闭合 不需要再使用closePath了 9、只要有足够的耐性是完全可以利用贝塞尔曲线绘制任何图形的 10、二次方曲线在火狐下存在bug 因此可以利用三次方曲线代替二次方曲线使用 11、图像（如 PNG GIF JPEG等）都可以引入到 canvas 中 而且其它的 canvas 元素也可以作为图像的来源 12、下面是基本的canvas图片绘制代码 其中 image 是 image 或者 canvas 对象 x 和 y 是其在目标 canvas 里的起始坐标 drawImage(image, x, y) 下面一段代码表示缩放图片 width和height表示缩放的尺寸 drawImage(image, x, y, width, height) 下面一段代码表示剪切图片 第一个参数和其它的是相同的 都是一个图像或者另一个 canvas 的引用。其它8个参数中分别表示图片中裁减的起始x坐标 图片中裁减的起始y坐标 裁减区域宽度 裁减区域高度 所画位置x坐标 所画位置y坐标 所画图形宽度 所画图形高度 裁剪区域的尺寸是可以和所画图形的尺寸不一样的 此时会缩放到所画图片的尺寸 drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 13、strokeStyle 是用于设置图形轮廓的颜色 而 fillStyle 用于设置填充颜色。color 可以是表示 CSS 颜色值的字符串 渐变对象或者图案对象。默认情况下 线条和填充颜色都是黑色(CSS 颜色值 #000000)。 14、图像透明度可以用globalAlpha = transparency value或者rgba颜色值来表示 15、lineWidth 属性设置当前绘线的粗细 为解决1px线宽bug问题 采用+0.5的方式来解决 16、lineCap 属性最左边的线用了默认的 butt 。可以注意到它是与辅助线齐平的。中间的是 round 的效果 端点处加上了半径为一半线宽的半圆。右边的是 square 的效果 端点处加上了等宽且高度为一半线宽的方块 17、lineJoin 属性这里我同样用三条折线来做例子 分别设置不同的 lineJoin 值。最上面一条是 round 的效果 边角处被磨圆了 圆的半径等于线宽。中间和最下面一条分别是 bevel 和 miter 的效果。当值是 miter 的时候 线段会在连接处外侧延伸直至交于一点 延伸效果受到下面将要介绍的 miterLimit 属性的制约 18、save 和 restore 方法是用来保存和恢复 canvas 状态的 都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。Canvas 状态是以堆(stack)的方式保存的 每一次调用 save 方法 当前的状态就会被推入堆中保存起来。每一次调用 restore 方法 上一个保存的状态就从堆中弹出 所有设定都恢复。 19、transform(1, 0, 0, 1, 0, 0)参数分别表示水平方向缩放、水平方向旋转（顺时针）、垂直方向旋转（逆时针）、垂直方向缩放、水平方向偏移量、垂直方向偏移量 setTransform(1, 0, 0, 1, 0, 0)表示重置前一个变换矩阵然后构建新的矩阵 参数作用同上 rotate(angle) （一个半径等于1弧度 2πr/r=弧度即360=2π 即1=π/180） 20、动画其实就是不断清空画板（clearRect()） 然后重绘来源：爱蒂网
