html部分
script部分
自定义形状
var canvas=document.getElementById('mycanvas');
var cxt=canvas.getContext('2d');
cxt.beginPath();//隔离.stroke()和.fill()对之上内容的影响
cxt.moveTo(0,0);//设置起点,无起点则由第一个lineTo代替
cxt.lineTo(100,100);
cxt.lineTo(200,100);
cxt.closePath();//自动闭合当前内容到起点
cxt.strokeStyle='red';//设置描边颜色
cxt.lineWidth=10;//设置描边粗,仅对各种stroke有影响
cxt.stroke();//描边
cxt.fillStyle='blue';//设置填充颜色
cxt.fill();//填充
矩形
cxt.beginPath();
cxt.rect(100,100,150,50)//依次为左上角的x,y坐标,x轴边长,y轴边长
cxt.closePath();
cxt.stroke();
更直接的还有
cxt.beginPath();
cxt.strokeRect(100,100,150,50)//依次为左上角的x,y坐标,x轴边长,y轴边长
cxt.closePath();
或
cxt.beginPath();
cxt.fillRect(100,100,150,50);//依次为左上角的x,y坐标,x轴边长,y轴边长
cxt.closePath();
此外有清除指定矩形范围
cxt.clearRect(100,100,150,50);//依次为左上角的x,y坐标,x轴边长,y轴边长
圆弧
cxt.beginPath();
cxt.arc(100,100,150,0,Math.PI/3,false);//依次为圆心的x,y坐标,半径,起止角度(0为三点钟方向,均需用弧度表示),顺逆时针(默认为false,顺时针)
cxt.closePath();
cxt.stroke();
复杂路径填充
- 非0环绕原则:区域中任意方向作射线,若相交的顺逆方向路径数量相等则视为不在区域中,不填充
内容
文字方法
- strokeText(text, x, y) 描边写字
- 受到strokeStyle,以及lineWidth的影响
- fillText(text, x, y) 填充写字
- 受到fillStyle的影响,不受lineWidth影响
- 以上两者中,x,y为定位,受到textAlign和textBaseline影响
- measureText(text) 返回对象文本的宽度
- font 属性 设置 大小、字体 如
cxt.font="100px MicrosoftYaHei"; - textAlign 属性 水平对齐方式 start(默认)/end/center/left/right
- textBaseline 属性 垂直对齐方式 alphabetic(默认)/top/bottom/middle/hanging/ideographic
绘制图片（插入图片）
插入图片
drawImage(img, x, y)
- img image的dom元素
- 利用var img=document.createElement('img')和img.src=''
- 且应在img.onload触发后执行
- x,y 插入到 画布的位置 坐标
插入图片并改变大小
drawImage(img, x, y, width, height)
插入裁剪后的图片
drawImage(img, sx,sy,swidth,sheight, x, y, width, height)
- 先在原图中根据 sx,sy,swidth,sheight裁剪出一部分,然后根据 x, y, width, height放入画布中
- sx/sy: 图片上开始裁剪的位置
- swidth/sheight : 裁剪图片的大小
阴影(少用,性能差)
- 阴影的大小粗细和原型相等,不能改变
- shadowColor 阴影颜色
- shadowBlur 阴影的模糊值
- shadowOffsetX 阴影的左偏移量
- shadowOffsetY 阴影的右偏移量
渐变
线性渐变
- var grd = cxt.createLinearGradien(x, y, x1, y1);
- x,y为起点,x1,y1为终点
- 一经设置,等同于隐藏在画布下,所有.fillStyle或.strokeStyle为grd的目标会采用该渐变
- grd.addColorStop(位置, color)
- 位置范围为0~1
- 可设置多个
径向渐变
- createRadiaGradient(x1, y1, r1, x2, y2, r2)//第一个圆和第二个圆
- addColorStop()
把背景图片作为填充(同渐变,生成的图片相对于画布固定)
- var bg=createPattern(imgDom, repeate)
- 第二个参数 repeate/ repeat-x / repeat-y / no-repeat
变换(每次变换会在上一次的基础上进行)
缩放
- sacle(x, y)
位移(重新布置原点)
- translate(x, y)
旋转(弧度,围绕当前原点)
- rotate(angle)
环境的保存和恢复(包括变换,透明,限定区等)
- save()
- restore()//释放内存,不再能restore()
设置透明
- globalAlpha = number 设置不透明度
- 全局设置是对整个画布（绘图环境） 进行设置
限定绘图区域(跟随之前的闭合路径)
- clip()
输出base64编码
- canvas.toDataURL(type, encoder)
- type为mime类型 image/jpeg image/gif image/png image/webp
- encoder为0~1表示图片质量,1为无损,仅能jpeg和webp
画布渲染画布
把一个画布以图片的形式用 drawImage() 插入到另一个画布
这是一种canvas的优化手段
设置线条
- lineCap 属性 设置线条两端的形状 butt/round/square
- lineJoin 属性 设置线条夹角 miter/bevel/round
- miterLimit 属性 设置夹角斜角的最大长度 一般默认 10
贝塞尔曲线
创建梁切线的弧
判断点是否在路径(填充区)中
- cxt.isPointInPath(x,y)
使用canvas制作图片并分享的案例