Canvas从入门到实战( 三 ) _Canvas

3.8、几何变化：

.translate(x,y)：画布默认的原点是(0,0) ，此方法可以切换原点到(x,y)而不需要手动更改绘制图形的坐标；
.rotate(angle)：将画布旋转一定的角度， angle单位为弧度；
.scale(sx,sy)：sx为水平方向的缩放比例， sy为竖直方向的缩放比例；
.transform(a,b,c,d,e,f)：依次为水平缩放、垂直倾斜、水平倾斜、垂直缩放、水平移动、垂直移动；

const colors = ['red','orange','yellow','green','blue','purple'];ctx.translate(150,150)for(let i = 0; i < 6; i++) {ctx.beginPath()ctx.fillStyle = colors[i]ctx.moveTo(0,0)ctx.lineTo(100,0)ctx.lineTo(100,50)ctx.rotate(Math.PI/3)ctx.fill()

文章插图

4、综合实战

const p = Math.PI;function clock() {const date = new Date();const hour = date.getHours()const s = date.getSeconds();const m = date.getMinutes();const h = !!(hour % 12) ? hour % 12 : 12;ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.save(); // 保存画布初始状态ctx.translate(150, 150);ctx.rotate(-p / 2);// 轮廓ctx.beginPath();ctx.lineWidth = 5;ctx.strokeStyle = "#76b2ff";ctx.arc(0, 0, 80, 0, p * 2);ctx.stroke();// 圆心ctx.beginPath();ctx.arc(0, 0, 2, 0, p * 2);ctx.fill();// 分针、秒针刻度for (let i = 0; i < 60; i++) {ctx.beginPath();ctx.rotate(p / 30);ctx.moveTo(75, 0);ctx.lineWidth = 4;ctx.strokeStyle = "#89f086";ctx.lineTo(80, 0);ctx.stroke();// 时针刻度for (let i = 0; i < 12; i++) {ctx.beginPath()ctx.rotate(p / 6)ctx.moveTo(70, 0)ctx.lineTo(80, 0)ctx.stroke()ctx.save(); // 保存画布变换之后的状态// 秒针ctx.beginPath();ctx.rotate(s * (p / 30));ctx.lineWidth = 2ctx.strokeStyle = '#ff6700'ctx.moveTo(0, 0);ctx.lineTo(80, 0);ctx.stroke();// 恢复之前的状态再保存 ， 时针、分针、秒针都是基于原点以及画布方向变换后绘制ctx.restore();ctx.save();// 分针ctx.beginPath();ctx.rotate(m * (p / 30));ctx.lineWidth = 3;ctx.strokeStyle = '#6700ff'ctx.moveTo(0, 0);ctx.lineTo(70, 0);ctx.stroke();ctx.restore();// 时针ctx.beginPath();ctx.rotate(h * (p / 6));ctx.lineWidth = 4;ctx.moveTo(0, 0);ctx.lineTo(60, 0);ctx.stroke();ctx.restore(); // 恢复画布最初状态document.querySelector('div').innerText = `Now：${h} : ${m} : ${s} ${hour > 12 ? 'pm' : 'am'}`window.requestAnimationFrame(clock);clock();

文章插图

5、小结
随着互联网的高速发展，用户对页面的视觉和交互有着越来越高的要求，传统的web开发无法得到满足，利用Canvas强大的绘图能力，可以让网页显示的内容更加的丰富多彩，也能给用户带来更好的视觉体验。
作者:LLS-FE团队
出处:https://mp.weixin.qq.com/s/bvkx3wOeMvIUU64cktX6iA