用户投稿此篇要来介绍 canvas，它是一个 html 中的元素，并且可以使用 javascript 来操纵，并在网页上画出一些图形，今天就是带大家一起了解该如何绘製图形，后续还会有其他的介绍，那让我们开始吧!
新增 canvas 元素
首先我们在 body 内新增一个 canvas 元素，并给它 id 与宽高
// index.html<body> <canvas id="mycanvas" width="600" height="600"></canvas></body>也可以使用 css 设定，若用 css 设定则需另外用 javascript 来调整宽高
因为 css 调整的是可以看见的範围，而 javascript 调整的是整张画布的大小
/* style.css */#mycanvas { width: 600px; height: 600px;}// javascript.jsconst canvas = document.getElementById('mycanvas');const ctx = canvas.getContext('2d');// 直接设定像素canvas.width = 600;canvas.height = 600;// 或是等同萤幕宽高canvas.width = window.innerWidth;canvas.height = window.innerHeight;开始画图吧!
要绘製 canvas 我们必须使用 javascript 来操纵它，首先抓取元素，并将它设为 2d 图形
// javascript.jsconst canvas = document.getElementById('mycanvas');const ctx = canvas.getContext('2d');设定完成后就可以开始画图啰~
矩形
// 填满颜色的矩形ctx.fillRect(x, y, width, height)// 空心的矩形ctx.strokeRect(x, y, width, height)// 清除矩形内的颜色ctx.clearRect(x, y, width, height)// 範例ctx.fillRect(25,25,100,100);ctx.clearRect(45,45,60,60);ctx.strokeRect(50,50,50,50);範例图形
路径绘图
// 开启绘图ctx.beginPath()// 结束路径ctx.closePath()// 移动画笔ctx.moveTo(x, y)// 画出线条ctx.lineTo(x, y)// 画出边框ctx.stroke()// 填满路径ctx.fill()// 範例ctx.beginPath();ctx.moveTo(75,50);ctx.lineTo(100,75);ctx.lineTo(100,25);ctx.fill();範例图形
弧形
弧形的参数比较多，共有六个
arc(x, y, radius, startAngle, endAngle, anticlockwise)此方法使用的是弧度不是角度，弧度的单位是 π，所以我们要先使用 javascript 将角度换算
// 1π 等于 180度(Math.PI/180) * degx:圆心 x 座标y:圆心 y 座标radius:半径startAngle:起始点endAngle:终点anticlockwise:顺时钟为 false，逆时钟为 true// 範例ctx.beginPath();ctx.arc(75,75,50,0,Math.PI*2,true);ctx.moveTo(110,75);ctx.arc(75,75,35,0,Math.PI,false);ctx.moveTo(65,65);ctx.arc(60,65,5,0,Math.PI*2,true);ctx.moveTo(95,65);ctx.arc(90,65,5,0,Math.PI*2,true);ctx.stroke();範例图形
贝兹曲线
贝兹曲线又更複杂些，分为二次与三次贝兹曲线，差异为由一个点控制或两个点控制
// 二次曲线quadraticCurveTo(cp1x, cp1y, x, y)// 三次曲线bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)// 二次曲线範例ctx.beginPath();ctx.moveTo(75,25);ctx.quadraticCurveTo(25,25,25,62.5);ctx.quadraticCurveTo(25,100,50,100);ctx.quadraticCurveTo(50,120,30,125);ctx.quadraticCurveTo(60,120,65,100);ctx.quadraticCurveTo(125,100,125,62.5);ctx.quadraticCurveTo(125,25,75,25);ctx.stroke();// 三次曲线範例ctx.beginPath();ctx.moveTo(75, 40);ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);ctx.stroke();範例图形
canvas 大部分就是用这些法来绘製
目前都是黑白的，之后要开始加上色彩与细部设定啰!
微信扫一扫打赏
支付宝扫一扫打赏
