canvas学习一

编程入门行业动态更新时间:2024-10-10 00:29:08

canvas学习一

一、什么是canvas？

canvas 是 HTML5 的标签元素，使用 JavaScript 在canvas里绘制图像。canvas画布是一个矩形区域，你可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

二、为什么需要学canvas？

我们可以使用canvas 绘制复杂图形，处理图像，开发游戏，做动画，处理视频…

div+css

canvas

三、创建 canvas 元素

通过 width 和 height 设置 canvas 画布的宽高，默认为 300*150。注意：不要使用css 设置canvas 尺寸，会走出图片拉伸

<canvas id="myCanvas" width="200" height="100"></canvas>

ie9 以上才支持 canvas，其他 chrome、火狐、苹果浏览器等都支持，处理浏览器不兼容：

<canvas id="myCanvas" width="200" height="100" >你的浏览器不支持canvas，请升级浏览器   /* 当浏览器不支持，会显示此行文本*/
</canvas>

四、canvas上下文对象 context

Canvas 自身无法绘制任何内容。Canvas 的绘图是使用 JavaScript 操作的。Context 对象就是 JavaScript 操作 Canvas 的接口。使用[CanvasElement].getContext('2d')来获取 2D 绘图上下文

let canvas = document.getElementById('myCanvas'); // 获得画布
let ctx = canvas.getContext('2d'); // 2d：图像 3d：webgl

五、基本的绘制路径

【1】canvas 坐标系和栅格

canvas 坐标系就是下图的x,y 轴，轴上有刻度，x 轴越往右越大，y 轴越往下越大，因此零点在左上角，这和html 的坐标系是一样的。

栅格就是右图的4 个格子，每一个格子就是一个像素，像素具有rgba 数据。

像素的数量等于canvas 的宽度乘以高度

【2】设置绘制起点(moveTo)

语法：ctx.moveTo(x, y)

解释：设置上下文绘制路径的起点，相当于移动画笔到某个位置

参数：x y 都是相对于 canvas 画布的最左上角

注意：绘制线段前必须先设置起点

【3】绘制直线(lineTo)

语法：ctx.lineTo(x, y)

解释：从x y的位置绘制一条直线到起点或者上一个线头点

参数：x y 线头点坐标

【4】路径开始和闭合(beginPath和closePath)

开始路径：ctx.beginPath()

闭合路径：ctx.closePath()

解释：如果是绘制不同状态的线段或者形状，必须使用开始新路径的方法把不同的绘制操作隔开。闭合路径会自动把最后的线头和开始的线头连在一起

beginPath：核心的作用是将不同绘制的形状进行隔离，每次执行此方法，表示重新绘制一个路径，跟之前的绘制的墨迹可以进行分开样式设置和管理

【5】描边(stroke)

语法：ctx.stroke()

解释：根据路径绘制线。路径只是草稿，真正绘制线必须执行stroke

【6】填充

语法：ctx.fill()

解释：填充，是将闭合的路径的内容填充具体的颜色，默认黑色。

【7】canvas 绘制的基本步骤

第一步：获得上下文 => canvasElem.getContext('2d')

第二步：开始路径规划 => ctx.beginPath()

第三步：移动起始点 => ctx.moveTo(x, y)

第四步：绘制线(矩形、圆形、图片...) => ctx.lineTo(x, y)

第五步：闭合路径 => ctx.closePath()

第六步：绘制描边 => ctx.stroke()

<body><canvas id="canvas"></canvas><script>// 创建画布const canvas = document.getElementById('canvas');canvas.width = window.innerWidth;canvas.height = window.innerHeight;// 画笔const ctx = canvas.getContext('2d');// 描边宽度ctx.lineWidth = 10;// 直线：lineTo(x, y)ctx.beginPath();ctx.moveTo(50, 50);ctx.lineTo(400, 50);ctx.lineTo(400, 300);ctx.stroke();</script>
</body>

六、矩形的绘制方法

【1】矩形方法：rect(x， y， width， height)

语法：ctx.rect(x, y, width, height)

解释：x y是矩形左上角坐标， width和height都是以像素计

注意：rect方法只是规划了矩形的路径，并没有填充和描边

【2】填充矩形方法：fillRect(x，y，width，height)

语法：ctx.fillRect(x, y, width, height)

解释：x y是矩形左上角坐标， width和height都是以像素计

注意：此方法执行完成后。立即对当前矩形进行fill填充

【3】描边矩形方法：strokeRect(x，y，width，height)

语法：ctx.strokeRect(x, y, width, height)

解释：x y是矩形左上角坐标， width和height都是以像素计

注意：此方法绘制完路径后立即进行stroke绘制

【4】清理矩形方法：clearRect(x，y，width，height)

语法：ctx.clearRect(x, y, width, hegiht)

解释：x y是矩形左上角坐标， width和height都是以像素计

注意：清除某个矩形内的绘制的内容，相当于橡皮擦

<body><canvas id="myCanvas"></canvas><script>// 创建画布const canvas = document.getElementById('myCanvas');canvas.width = window.innerWidth;canvas.height = window.innerHeight;//画笔const ctx = canvas.getContext('2d');/*填充矩形方法：fillRect(x,y,w,h)*/ctx.fillStyle = 'red';ctx.fillRect(50, 50, 400, 200);//描边宽度ctx.lineWidth = 10;/*描边矩形方法：strokeRect(x,y,w,h)*/ctx.strokeStyle = 'yellow';ctx.strokeRect(50, 50, 400, 200);/*清理矩形方法：clearRect(x,y,w,h)*/// ctx.clearRect(50,50,400,200);</script>
</body>

七、绘制圆形

【1】圆形方法：ctx.arc(x，y，r，sAngle，eAngle，counterclockwise)

语法：ctx.arc(x, y, r, sAngle, eAngle, counterclockwise)

解释：

x y：圆心坐标

r：半径大小

sAngle：绘制开始的弧度，注意是弧度不是角度

eAngel：结束的弧度，注意是弧度不是角度

counterclockwise：方向，true 是逆时针，false是顺时针。弧度和角度的转换公式： rad = deg\*Math.PI/180

<body><canvas id="canvas"></canvas><script>// 创建画布const canvas = document.getElementById('canvas');canvas.width = window.innerWidth;canvas.height = window.innerHeight;// 画笔const ctx = canvas.getContext('2d');// 描边宽度ctx.lineWidth = 10;//arc(x,y,半径，开始弧度，结束弧度，方向)ctx.beginPath();ctx.arc(200, 200, 100, 0, Math.PI * 3 / 2);ctx.stroke();// arc(x,y,半径，开始弧度，结束弧度，方向) ctx.beginPath();ctx.arc(400, 400, 100, 0, Math.PI / 2, true);ctx.closePath(); // 闭合路径ctx.stroke();</script>
</body>

八、切线圆弧

【1】切线圆弧方法：ctx.arcTo(x1，y1，x2，y2，r)

语法：ctx.arcTo(x1，y1，x2，y2，r)

解释：

x y：控制点

r：半径大小

<body><canvas id="canvas"></canvas><script>// 创建画布const canvas = document.getElementById('canvas');canvas.width = window.innerWidth;canvas.height = window.innerHeight;// 画笔const ctx = canvas.getContext('2d');// 描边宽度ctx.lineWidth = 10;//切线圆弧：arcTo(x1,y1,x2,y2,半径)ctx.beginPath();ctx.moveTo(50, 50);ctx.arcTo(400, 50, 400, 300, 100);ctx.stroke();</script>
</body>

七、贝赛尔曲线

【1】二次贝塞尔曲线：ctx.quadraticCurverTo(cpx1，cpy1，x，y)

【2】三次贝塞尔曲线：ctx.bezierCurverTo(cpx1，cpy1，cpx2，cpy2，x，y)

语法：ctx.bezierCurverTo(cpx1，cpy1，cpx2，cpy2，x，y)

解释：

cpx1 cpy1：第一个控制点

cpx2 cpy2：第二个控制点

x y：结束点

<body><canvas id="canvas"></canvas><script>// 创建画布const canvas = document.getElementById('canvas');canvas.width = window.innerWidth;canvas.height = window.innerHeight;// 画笔const ctx = canvas.getContext('2d');// 描边宽度ctx.lineWidth = 10;// 二次贝塞尔曲线：quadraCurverTo(cpx1,cpy1,x,y)ctx.beginPath();ctx.moveTo(50, 50);ctx.quadraticCurveTo(400, 50, 400, 300);ctx.stroke();// 三次贝塞尔曲线：bezierCurverTo(cpx1,cpy1,cpx2,cpy2,x,y)ctx.beginPath();ctx.moveTo(50, 300);ctx.bezierCurveTo(400, 50, 400, 600, 600, 300);ctx.stroke();</script>
</body>