canvas - 绘制图片
2016-12-17 本文已影响142人
云音流
canvas - 图片绘制
1、 按照图片原大小加载
drawImage(img,x,y)
img - 当前加载的图片
x和y - 图片左上角的位置
注意：
必须要保证图片加载完毕后，再绘制图片（绘制写在onload事件里面）
2、 平铺图片
var ptn = context.createPattern(img,type)
img : 平铺的图片
type: 平铺的方式 — 四种，使用时记得加 " "
repeat/no-repeat/repeaet-x/repeat-y
返回一个平铺对象，将这个对象作为将要绘制图像的填充颜色
context.fillStyle=ptn; //填充
context.fillRect(x,y,width,height); //绘制
注意：
必须要保证图片加载完毕(onload事件)后，再绘制图片，createPattern也要等到图片加载完毕后执行
完整的 drawImage
drawImage(img_elem,dx_or_sx,dy_or_sy,dw_or_sw,dh_or_sh,dx,dy,dw,dh);
dx_or_sx,dy_or_sy
dw_or_sw,dh_or_sh
dw,dh
以上三对数值不写就是按图片原大小加载
增加一对 --> 匹配 dw,dh 即： drawImage(img_elem,dx,dy,dw,dh);
增加两对 --> 会报错;
增加三对 --> 全部匹配 即：drawImage(img_elem,sx,sy,sw,sh,dx,dy,dw,dh);
4、 图形切割
<p><p> <strong>clip的定义和用法
clip() 方法从原始画布中剪切任意形状和尺寸。
提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。
您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。
-
矩形切割
context.rect(x,y,width,height);
context.clip() -
圆型切割
context.arc(x,y,radius,startAngle,endAngle,direction)
context.clip() -
css中的切割
clip:rect(0px 50px 200px 0px)
数值对应 上、下、左、右四个方向的切割量
矩形切割的实例
<!DOCTYPE html>
<html>
<body>
<p>不使用 clip()：</p>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
</script>
<br />
<p>使用 clip()：</p>
<canvas id="myCanvas2" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
</script>
</body>
</html>
canvas - 部分转换、其他方法
1、 scale(x,y); — 缩放
x - 水平方向上的缩放
y - 初值方向上的缩放
context.scale(sx,sy);
sx: 让x和width进行缩放
sy: 让y和height进行缩放
多次缩放效果会进行叠加
context.fillRect(x,y,width,height);//绘制
2、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的参考点，也可以改变旋转的中心点
3、rotate(degrees * Math.PI / 180) — 旋转画布
degrees：代表你想旋转的角度
正数： 顺时针
4、 save() 保存当前画布属性、状态
<p> 在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存
5、 resotre() 恢复画布属性状态
<p> 使用 resotre()恢复上一次被改变前的状态
上一篇：<a href="http://www.jianshu.com/p/bef7f6deb4c9">canvas绘制文字、矩形、圆形、线条</a>
