web.jpeg
1.缩放
cxt.scale(2,2);- 缩放的是整个画布，缩放后，继续绘制的图形会被放大或缩小。
<script type="text/javascript">
var canvas = document.getElementById("con");
//获取上下文
var cxt = canvas.getContext("2d");
cxt.rect(0,0,100,100);
cxt.fillStyle = "red";
//缩放
cxt.scale(2,2);
//放大一倍,不仅仅是宽度和高度,其x,y也会跟着放大
cxt.fillStyle = "blue";
cxt.rect(100,100,100,100);
//还原 缩小原来的一倍
cxt.scale(0.5,0.5);
cxt.fill();
</script>
image.png
2.位移
-
ctx.translate(x,y) 方法重新映射画布上的 (0,0) 位置- x： 添加到水平坐标（x）上的值
- y： 添加到垂直坐标（y）上的值
- 发生位移后，相当于把画布的0,0坐标 更换到新的x,y的位置，所有绘制的新元素都被影响。
位移画布一般配合缩放和旋转等。
<script type="text/javascript">
var canvas = document.getElementById("con");
//获取上下文
var cxt = canvas.getContext("2d");
cxt.fillStyle = "red";
cxt.fillRect(0,0,200,100);
//位移 对之前的操作 没有影响
cxt.translate(100,100);
cxt.fillStyle = "blue";
cxt.fillRect(100,100,200,100);
</script>
image.png
3.旋转
-
context.rotate(angle);方法旋转当前的绘图 - 注意参数是弧度（PI）
- 如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。
<script type="text/javascript">
var canvas = document.getElementById("con");
//获取上下文
var cxt = canvas.getContext("2d");
cxt.fillStyle = "red";
cxt.fillRect(100,100,200,100);
cxt.rotate(20 * Math.PI/180);
cxt.fillStyle = "blue";
cxt.fillRect(100,100,200,100);
</script>
image.png
4.状态的保存和还原
cxt.save(); 保存cxt.restore(); 还原
<script type="text/javascript">
var canvas = document.getElementById("con");
//获取上下文
var cxt = canvas.getContext("2d");
cxt.fillRect(100,100,100,100);
//保存状态
cxt.save();
//第二个状态
cxt.translate(100,100);
cxt.rotate(20 *Math.PI/180);
cxt.fillStyle = "red";
cxt.fillRect(100,100,200,100);
//第三个状态
//还原状态
cxt.restore();
cxt.fillStyle = "blue";
cxt.fillRect(200,100,300,100);
</script>
image.png
一个综合例子
-
要想围绕一个点旋转要做到以下几点
- 画布要平移 你要旋转的点
- 绘制的图形 在平移以后是相对于 新的画布，所以必须要让自身的中点在
平移后的原点坐标上,既是 原点是自身 宽度和高度的一半
<script type="text/javascript">
var canvas = document.getElementById("con");
//获取上下文
var cxt = canvas.getContext("2d");
//绘制矩形
// cxt.fillRect(200,200,200,100);
var ang = 20;
setInterval(function(){
//清屏
cxt.clearRect(0,0,canvas.clientWidth,canvas.clientHeight);
//保存状态
cxt.save();
cxt.fillStyle = "red";
//平移
cxt.translate(300,200);
//旋转
cxt.rotate(ang * Math.PI/180);
//要相对于平移后的坐标点 旋转
//要移动自身坐标的宽度和高度的一半 才会到相对平移画布的远点
cxt.fillRect(-100,-50,200,100);
ang += 10;
cxt.restore();
},200);
</script>
Untitled.gif
5.将绘制的内容通过Base64转码 输出二进制数据
-
canvas.toDataURL(type, encoderOptions);- type： 设置输出的类型，比如 image/png image/jpeg等
- encoderOptions,0-1之间的数字，用于标识输出图片的质量，1表示无损压缩,对于jpg/webp格式才有作用
<script type="text/javascript">
var canvas = document.getElementById("con");
//获取上下文
var cxt = canvas.getContext("2d");
//绘制矩形
cxt.fillStyle = "red";
cxt.fillRect(200,200,200,100);
//绘制文字
cxt.font = "20px '微软雅黑'";
cxt.strokeText("来来，你是谁",100,100);
//转化为base64
/*
canvas.toDataURL(type, encoderOptions);
type，设置输出的类型，比如 image/png image/jpeg等
encoderOptions： 0-1之间的数字，用于标识输出图片的质量，1表示无损压缩，类型为： image/jpeg 或者image/webp才起作用。
*/
var data = canvas.toDataURL("image/png",1);
var img = document.getElementById("img_id");
img.src = data;
</script>
image.png
6.合成属性globalCompositeOperation
cxt.globalCompositeOperation = "source-over"source-over默认的样式属性 相交部分由后绘制图形的填充(颜色,渐变,纹理)覆盖,全部浏览器通过
<script type="text/javascript">
var canvas = document.getElementById("con");
//获取上下文
var cxt = canvas.getContext("2d");
//绘制一个矩形
cxt.fillStyle = "red";
cxt.fillRect(200,200,200,100);
//合成属性
cxt.globalCompositeOperation = "source-over";
//绘制一个圆形
cxt.fillStyle = "#008000";
cxt.arc(400,300,100,0,360*Math.PI/180);
cxt.fill();
</script>
image.png
-
source-in只绘制相交部分,由后绘制图形的填充覆盖,其余部分透明
image.png
-
source-out只绘制后绘制图形不相交的部分,由后绘制图形的填充覆盖,其余部分透明
image.png
-
source-atop后绘制图形不相交的部分透明,相交部分由后绘制图形的填充覆盖,全部浏览器通过
image.png
-
destination-over相交部分由先绘制图形的填充(颜色,渐变,纹理)覆盖,全部浏览器通过
image.png destination-in只绘制相交部分,由先绘制图形的填充覆盖,其余部分透明
image.png
-
destination-out只绘制先绘制图形不相交的部分,由先绘制图形的填充覆盖,其余部分透明,全部浏览器通过
image.png
-
destination-atop先绘制图形不相交的部分透明,相交部分由先绘制图形的填充覆盖
image.png
-
lighter相交部分由根据先后图形填充来增加亮度,全部浏览器通过
image.png
-
darker相交部分由根据先后图形填充来降低亮度
image.png
-
copy只绘制后绘制图形,只有opera通过
image.png
-
xor相交部分透明,全部浏览器通过
image.png
一个刮刮乐的例子
<script type="text/javascript">
var canvas = document.getElementById("con");
//获取上下文
var cxt = canvas.getContext("2d");
cxt.fillStyle = "#ccc";
cxt.fillRect(0,0,320,160);
//合成属性
cxt.globalCompositeOperation = "destination-out";
canvas.onmousedown = function(){
canvas.onmousemove = function(e){
//绘制圆形
cxt.arc(e.offsetX,e.offsetY,20,0,2 * Math.PI);
//渲染
cxt.fill();
}
canvas.onmouseup = function(){
canvas.onmousemove = null;
canvas.onmouseup = null;
}
}
</script>
Untitled.gif
