Canvas从入门到放弃 (二)

在慕课网上学习了 Canvas绘图详解 这门教程，写了这篇canvas教程，想和大家分享学习的过程，希望和大家共同进步．=^_^=
这么久才更教程的第二篇，我该打(；′⌒`)

1. 效果展示

完整代码请戳Lesson2/demo9.html

效果展示.png

2. 图像的变换和保存 2.1 位移 translate(x,y)

完整代码请戳Lesson2/demo1.html

　//第一个正方形从(0,0)点开始，x轴平移100像素，y轴平移100像素 context.fillStyle = "#559ABB"; context.translate(100,100); context.fillRect(0, 0, 100, 100); //第二个正方形从(100,100)点开始，x轴平移100像素，y轴平移100像素 context.fillStyle = "#F8D184"; context.translate(100,100); context.fillRect(0, 0, 100, 100);

可以看出两个translate的效果是叠加的，为了使用图形变换时效果不影响可保存canvas的状态。

图片.png

Canvas状态的保存和恢复

save(): 保存当前图形的状态
restore(): 返回save的canvas的所有状态

完整代码请戳Lesson2/demo2.html

//保存第一个正方形的状态 //从(0,0)点开始，x轴平移100像素，y轴平移100像素 context.save(); context.fillStyle = "#559ABB"; context.translate(100,100); context.fillRect(0, 0, 100, 100); context.restore(); //保存第二个正方形的状态 //从(0,0)点开始，x轴平移100像素，y轴平移100像素 context.save(); context.fillStyle = "#F8D184"; context.translate(100,100); context.fillRect(0, 0, 100, 100); context.restore();

均以(0,0)为起点x,y轴平移100像素，蓝色的正方形被黄色的正方形盖住了

图片.png

2.2 旋转rotate(deg)

使用translate,rotate的星空图
完整代码请戳Lesson2/demo3.html

window.onload = function () { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); canvas.width = 400; canvas.height = 400; context.fillStyle = "#283D52"; context.fillRect(0, 0, canvas.width, canvas.height); //假设画布中有50个星星 for (var i = 0; i <= 50; i++) { //x轴偏移量 var x = Math.random() * canvas.width; //y轴偏移量 var y = Math.random() * canvas.height; //任意角度 var a = Math.random() * 360; draw(context, x, y, a); } }; //绘制星星 function draw(cxt, x, y, rot) { //保存canvas的状态 cxt.save(); //x,y轴的偏移量 cxt.translate(x, y); //旋转的角度 cxt.rotate(rot / 180 * Math.PI); //绘制星星的路径 starPath(cxt); cxt.fillStyle = "#F8D184"; cxt.strokeStyle = "#FAD085"; cxt.lineWidth = 2; cxt.lineJoin = "round"; cxt.fill(); cxt.stroke(); cxt.restore(); } //绘制一个星星的路径,这里绘制星星时设定大圆半径为10，小圆半径为大圆半径的一半 function starPath(cxt) { cxt.beginPath(); for (var i = 0; i < 5; i++) { cxt.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI) * 10, 　　　-Math.sin((18 + i * 72) / 180 * Math.PI) * 10); cxt.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * 0.5 * 10, 　　　-Math.sin((54 + i * 72) / 180 * Math.PI) * 0.5 * 10); } cxt.closePath(); }

如何绘制星星　可参考 Canvas从入门到放弃 (一)
只有平移和旋转，所有星星都是一样大