绘制图片
-
按图片原大小绘制
var context = document.getElementById("canvas").getContext("2d");//准备图片元素对象 var img = new Image(); img.src = "class.jpg"; img.width = 200; img.height = 200; //当图片准备以后再绘制 img.onload = function(){ //绘制图片,按照图片本身的大小进行加载 context.drawImage(img,0,0); } -
平铺图片
var context = document.getElementById("canvas").getContext("2d");var img = new Image(); img.src = "class.jpg"; img.onload = function(){ //创建平铺对象 var pat = context.createPattern(img,"repeat-y"); //将平铺对象作为填充颜色 context.fillStyle = pat; //绘制 context.fillRect(0,0,400,400); }
绘制线条
-
绘制方法
1）设置起点坐标值
moveTo(x,y);2）设置终点(折点)坐标值
lineTo(x,y); -
绘制线条的属性
1）设置线条的宽度，默认1px
lineWidth2）设置线条端点的形状
lineCap 起点和终点的样式 butt - 平角 round - 圆角 square - 正方向3）设置两条线交点的形状
lineJoin 折点的样式 miter - 尖角 round - 圆角 bevel - 斜角4）miterLimit - 配合lineJoin使用
lineJoin设置为miter，该属性值设置尖角延伸范围
图片切割
clip() 方法从原始画布中剪切任意形状和尺寸。
提示 ：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。
您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。
画布方法
scale(x,y); — 缩放
x - 水平方向上的缩放 y - 初值方向上的缩放 context.scale(sx,sy); sx: 让x和width进行缩放 sy: 让y和height进行缩放 多次缩放效果会进行叠加context.fillRect(x,y,width,height);//绘制translate(x,y) — 重新映射画布上的（0,0）位置
context.translate(tx,ty); // 即原来的参考点移到（tx，ty）点 context.fillRect(x,y,width,height); //绘制，x 和 y 是相对于点（tx，ty） tx和ty改变了矩形的x和y的参考点，也可以改变旋转的中心点rotate(degrees * Math.PI / 180) — 旋转画布
degrees：代表你想旋转的角度 正数： 顺时针-
save() 保存当前画布属性、状态
在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存 -
resotre() 恢复画布属性状态
使用 resotre()恢复上一次被改变前的状态
