星星有所不知

canvas绘制图形1. canvas默认的width:300px、height:150px。2. canvas只支持一种原生的图形绘制：矩形。2.1 canvas绘制矩形的3种方式：3. 图形的基本元素是路径。3.1 绘制路径步骤：3.2 绘制圆弧的两种方式：3.3 绘制贝塞尔曲线：4. 参考1. canvas默认的width:300px、height:150px。也可以通过css来设置wi...

canvas设置颜色及线条样式1. canvas设置颜色2. canvas设置线条样式1. canvas设置颜色fillStyle = color; //设置图形的填充颜色strokeStyle = color; //设置图形轮廓的颜色color可以是表示css颜色值的字符串，渐变对象或者图案对象，color默认为黑色globalAlpha = 透明度（0-1）//设置透明度，有效范围...

canvas绘制文本fillText(text, x, y, [, maxWidth]); //在指定的(x, y)位置填充指定的文本，绘制的最大宽度是可选的,若设置了最大宽度，且字体实际宽度大于最大宽度，则字体会被压缩。strokeText(text, x, y, [, maxWidth]); //在指定的(x, y)位置绘制文本边框，绘制的最大宽度是可选的。font = value;/...

Canvas图片的合成1. 图片的合成2. 裁剪路径1. 图片的合成globalCompositeOperation = type;//设置绘制图形的绘制顺序 * type的值为： * 1. source-over（默认，新图像会覆盖原有图像） * 2. source-in (仅出现新图像与原有图像的重叠部分的新图像，其他区域都变透明) * 3....

canvas绘制图标1. 绘制图片2. 图片切片1. 绘制图片 ctx.drawImage(img, x, y [, width, height]); 参数说明： 1. img为new Image()或者document.querySelector('img')返回的对象 2. (x, y)为绘制图片的起始坐标位置 3. width,height 用来控制图片的缩放大小...

canvas状态的保存与恢复1. 状态的保存1.1 绘画状态包括2. 状态的恢复1. 状态的保存 save() canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存1.1 绘画状态包括1. 当前应用的变形（移动、旋转、缩放）2. strokeStyle/fillStyle/globalAlpha/lineWidth/lineCap/lineJoin...

Canvas图像变形处理1. translate(x, y);//用来移动canvas的坐标原点到指定的位置 参数说明： 1. x 是左右偏移量 2. y 是上下偏移量 建议：在做变形之前，先保存当前状态，便于之后恢复 2. rotate(angle);//旋转坐标轴 参数说明： angle:旋转的角度，顺时针方向，以弧度为单位 ...