径向渐变
grd=createRadialGradient(x0,y0,r0,x1,y1,r1)
grd.addColorStop(位置,color)
绘制背景图
- 把图片填充为背景
var img=document.getElementById('img')
img.src='1.jpg
var pattern=cxt.createPattern(img,repeat-x/repead-y/repeat/no-repeat)
加载图片需要写在window.onload=function(){}里
变换(对绘图环境进行变换)
-
缩放scale( scalewidth,scaleheight)
- oscalewidth : 缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推)
- scaleheight : 缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc.)
注意:缩放的是整个画布,缩放后,继续绘制的图形会被放大或缩小
-
位移translate(x,y),重新映射画布上的(0,0)位置;
- x:添加到水平坐标(x)上的值
- y:添加到垂直坐标(y)上的值
- 发生位移后,相当于把画布的0,0坐标 更新到新的写x,y的位置,所有绘制的新元素都被影响
-
rotate(弧度)
- 如需将角度转换为弧度,请使用 degrees*Math.PI/180 公式进行计算
绘制环境保存和还原
- save() 保存当前绘图环境
- restore()恢复之前的绘图环境
设置透明度
- globalAlpha=number 设置不透明度(0透明,1不透明)
- 全局设置是对整个画布(绘图环境)进行设置
画布限定区域绘制
- clip()方法从原始画布中剪切任意形状和尺寸
- 一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内,不能访问画布上的其他区域
画布保存base64编码内容
- 把canvas绘制的内容输出成base64内容
- canvas.toDataURL(type,encoderOptions);
eg:
var canvas=document.getElementById('mycanvas')
canvas.toDataURL(image/ipg,1) - 参数说明:
- type,设置输入的类型,image/png,image/jpeg等
- encoderOptions:0-1之间的数字,用于标识图片的质量,1表示无损压缩,o类型为: image/jpeg 或者image/webp才起作用。
画布渲染画布
- context.drawImage(img,x,y)
- img也可以是一个画布整体的渲染到另一个画布上
线条样式
- lineCap 设置或返回线条的结束断点(线头、线冒)样式
- butt:默认,向线条的每个末端添加平直的边缘。
- oround : 向线条的每个末端添加圆形线帽。
- square: 向线条的每个末端添加正方形线帽。
- lineJoin 设置或返回两条线相交时,所创建的拐角类型
- bevel:创建斜角。
- round: 创建圆角.
- miter: 默认。创建尖角
- miterLimit 设置或返回最大斜接长度
- 斜接长度指的是在两条线交汇处内角和外角之间的距离。
- 一般用默认值:10就可以了。除非需要特别长的尖角时,使用此属性。