1. canvas 简介
应用场景:游戏、背景动画。
学习教程网址:Canvas教程 - Web API 接口参考 | MDN
canva 是画布,js 控制画布 canvas 绘制图形。
2. canvas 的基本绘制步骤
2.1 HTML部分
<canvas id='canvas' width="400" height="300">标签内部文字默认不显示</canvas>
- canvas 画布标签,默认大小:300*150。
- 具有两个属性:width、height。
- 设置大小不能通过样式,只能是修改属性。
2.2 JavaScript 部分
1. 获取canvas元素
var canvas = document.getElementById('canvas');
2. 渲染上下文(类似于画笔)
var ctx = canvas.getContext('2d');
- <canvas> 元素有一个叫做 getContext() 的方法,这个方法是用来获得渲染上下文和它的绘画功能。
3. 了解一下画布栅格
- 在我们开始画图之前,我们需要了解一下画布栅格(canvas grid)以及坐标空间。
- 栅格的起点为左上角(坐标为(0,0)),所有元素的位置都相对于原点定位。
- 所以图中蓝色方形左上角的坐标为距离左边(X轴)x像素,距离上边(Y轴)y像素(坐标为(x,y))。
4. 绘制矩形
canvas提供了三种方法绘制矩形:
- 绘制一个填充的矩形
// fillRect(x, y, width, height) // x 矩形起始点的 x 轴坐标。 // y 矩形起始点的 y 轴坐标。 // width 矩形的宽度。 // height 矩形的高度。 ctx.fillRect(10,10,200,100);
- 绘制一个矩形的边框
// strokeRect(x, y, width, height) ctx.strokeRect(220,10,100,100);
- 清除指定矩形区域,让清除部分完全透明
// clearRect(x, y, width, height) ctx.clearRect(20,20,100,70);
5. 绘制路径
路径绘制图形需要一些额外的步骤:
- 首先,你需要创建路径起始点。
- 然后你使用画图命令去画出路径。
- 之后你把路径封闭。
- 一旦路径生成,你就能通过描边或填充路径区域来渲染图形。
示例:
//绘制距离---找第一个点的坐标 moveTo(x,y) ctx.moveTo(10,10); ctx.lineTo(110,10); ctx.lineTo(60,160); //闭合路径 //方法1:再次找一个结束的点 // ctx.lineTo(10,10); //方法2:函数closePath() ctx.closePath(); //描边 通过线条来绘制图形轮廓 // ctx.strokeStyle='red'; // //描边加粗 ctx.lineWidth=6; ctx.stroke(); //fillStyle = color 设置图形的填充颜色 // ctx.fillStyle='red'; //注意:想修改填充的图形的颜色,需要先设置颜色,再fill() 填充 ctx.fillStyle='#999';//颜色:red #000 rgb() rgba() // 填充 ctx.fill(); //绘制图片 //再次绘制图片 会保留上面设置的颜色 fillStyle='' 可以在绘制的时候重新再次设置
常用的函数:
- 新建一条路径,生成之后,图形绘制命令被指向到路径上生成路径(抬笔)。
ctx.beginPath()
- 将一个新的子路径的起始点移动到(x,y)坐标。
ctx.moveTo(x, y);
- 使用直线连接子路径的最后的点到x,y坐标。
ctx.lineTo(x, y);
- 闭合路径之后图形绘制命令又重新指向到上下文中。
ctx.closePath()
- 通过线条来绘制图形轮廓。
ctx.stroke()
- 通过填充路径的内容区域生成实心的图形。
ctx.fill()
- 设置图形的填充颜色。
//color:red #000 rgb() rgba() ctx.fillStyle = color;
- 设置图形轮廓的颜色。
ctx.strokeStyle = color;
- 设置线条宽度。
// value 描述线段宽度的数字。 ctx.lineWidth = value;
6.绘制圆弧或者圆
绘制圆弧或者圆,通常使用
arc()
方法:// arc(x, y, radius, startAngle, endAngle, anticlockwise) true表示:逆时针 // x, y 是绘制圆的中心点;r半径 // startAngle开始的角度 endAngle结束的角度 // boolean画圆弧的方向 (默认是顺时针) 默认false //注意:arc()函数中表示角的单位是弧度,不是角度。 // 角度与弧度的js表达式: 弧度 = (Math.PI/180)*角,(0-2*Math.PI) ctx.arc(200,200,100,0,Math.PI,true);
示例:
// 头 ctx.arc(200,200,100,0,2*Math.PI); ctx.stroke(); //嘴巴 ctx.beginPath(); ctx.arc(200,200,70,0,Math.PI); ctx.stroke(); //左眼睛 ctx.beginPath(); ctx.arc(150,160,20,0,2*Math.PI); ctx.stroke(); //右眼睛 ctx.beginPath(); ctx.arc(250,160,20,0,2*Math.PI); ctx.stroke();
7. 绘制圆环
- 对圆的边框设置线宽;
- 使用重描达到嵌套效果;
ctx.beginPath(); ctx.arc(150,200,50,0,2*Math.PI); ctx.lineWidth=6; ctx.stroke(); ctx.beginPath(); ctx.arc(230,200,50,0,2*Math.PI); ctx.lineWidth=6; ctx.strokeStyle='green'; ctx.stroke(); //黑色的 嵌套绿色的 ctx.beginPath(); ctx.arc(150,200,50,1.5*Math.PI,2*Math.PI); ctx.lineWidth=6; ctx.strokeStyle='#000'; ctx.stroke();