canvas用法笔记
官方文档
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial
canvas介绍
canvas
:画布。
<canvas id="canvasId" width="200" height="200">替换内容(一般不用写)</canvas>
-
属性:
<canvas>
标签类似<img>
,但没有src
和alt
属性,一般只设置width
和height
两个属性,默认为:width=300px
,height=150px
。设置其他属性不会影响绘制出的图像。 -
替换内容:替换内容在正常情况下会被浏览器忽略,而不支持
<canvas>
标签的浏览器会忽略<canvas>
标签并渲染其中的替换内容。
基本用法
绘制准备
检查支持性,后续代码中为节省篇幅,默认支持
// 检查支持性
let canvas = document.getElementById('canvasId');
if (canvas.getContext){
// 绘制代码
} else {
// 不支持的处理代码
}
<canvas>
以左上角为圆点(0, 0),支持两种形式的图形绘制:矩形和路径
// 创建canvas标签
<canvas id="canvasId" width="500" height="200"></canvas>
// css
<style>
// 为了便于观察,此处添加了灰色背景
#canvasId {background-color: #eee;}
</style>
// js
<script>
let canvas = document.getElementById('canvasId'); // 获取canvas节点
let ctx = canvas.getContext("2d"); // 创建2d对象
</script>
绘制矩形
<canvas>
共提供了三种矩形绘制方法
fillReac(x, y, width, height)
// 绘制填充矩形strokeRect(x, y, width, height)
// 绘制矩形边框clearRect(x, y, width, height)
// 清除矩形区域
// 矩形绘制函数
function drawRect() {
let canvas = document.getElementById('canvasId'); // 获取canvas节点
let ctx = canvas.getContext('2d'); // 创建2d对象
ctx.fillRect(50, 50, 100, 100); // 以坐标(50, 50)为起点绘制长宽为100的填充矩形
ctx.strokeRect(200, 50, 100, 100); // 以坐标(200, 50)为起点绘制长宽为100的矩形边框
ctx.fillRect(350, 50, 100, 100); // 以坐标(350, 50)为起点绘制长宽为100的填充矩形
ctx.clearRect(400, 100, 50, 50); // 以坐标(400, 100)为起点清除长宽为50的矩形区域
}
drawRect(); // 调用绘制函数
绘制三角形
beginPath()
// 新建路径
moveTo(x, y)
// 移动笔触,以此为路径起点
lineTo(x, y)
// 绘制直线路径
closePath()
// 闭合路径
stroke()
// 将绘制的路径画出来,不会自动闭合路径
fill()
// 将绘制的路径画出来并实心填充路径内部,若路径未闭合将自动连接起点和终点
// 三角形绘制函数
function drawTriangle() {
let canvas = document.getElementById('canvasId');
let ctx = canvas.getContext('2d');
ctx.beginPath(); // 新建路径,必须写
ctx.moveTo(0, 50); // 移动笔触,以此为路径起点
ctx.lineTo(100, 150); // 绘制路径至目标点
ctx.lineTo(200, 50); // 绘制路径至下一目标点
ctx.lineTo(0, 50); // 绘制路径至起点,使用ctx.closePath();也可达到相同效果
ctx.stroke(); // 将所绘制的路径画出来,若不写则路径无法呈现,不会自动闭合路径
ctx.beginPath(); // 新建路径,必须写
ctx.moveTo(250, 50); // 移动笔触,以此为绘制起点
ctx.lineTo(350, 150); // 划线至目标点
ctx.lineTo(450, 50); // 划线至下一目标点
ctx.closePath(); // 闭合路径,不是必须的
ctx.fill(); // 绘制路径并实心填充路径内部,若未闭合路径将自动连接起点和终点,
}
drawTriangle(); // 调用绘制函数
绘制圆形
arc(x, y, radius, startAngle, endAngle, anticlockwise)
// 绘制圆弧路径
(x, y)
:圆心,radius
:半径,startAngle
:起始弧度,endAngle
:结束弧度,anticlockwise
:布尔值,false为顺时针绘制,true为逆时针绘制,默认为false顺时针注意:方法内用的是弧度而不是角度,换算方法为
弧度 = 角度 / 180 * Math.PI
// 圆形绘制函数
function drawArc(){
// 创建context2d对象
let canvas = document.getElementById('canvasId');
let ctx = canvas.getContext('2d');
ctx.lineWidth = 20; // 设置路径宽度
// 绘制半圆环
ctx.strokeStyle = '#ff99ff'; // 设置路径颜色
ctx.beginPath();
// 以(100, 100)为圆心,50为半径,-90度为起始角度,180度为结束角度,按顺时针方向绘制
ctx.arc(100, 100, 50, -Math.PI/2, Math.PI, false);
ctx.stroke();
// 绘制圆形
ctx.strokeStyle = '#333'; // 设置路径颜色
ctx.fillStyle = '#999'; // 设置填充颜色
ctx.beginPath();
// 以(250, 100)为圆心,50为半径,0度为起始角度,360度为结束角度,按顺时针方向绘制
ctx.arc(250, 100, 50, 0, Math.PI*2, false);
ctx.stroke(); // 画出路径
ctx.fill(); // 填充路径内部
// 注释:由于路径宽度是在圆边框的内外各分配一半,在填充时圆边框内侧的路径会被覆盖
// 绘制扇形
ctx.fillStyle = '#ffff99'; // 设置填充颜色
ctx.beginPath();
// 以(400, 100)为圆心,60为半径,-90度为起始角度,240度为结束角度,按顺时针方向绘制
ctx.arc(400, 100, 60, -Math.PI/2, -Math.PI/2 + 240/180*Math.PI, false);
ctx.lineTo(400, 100); // 绘制路径至圆心,若省略会得到被切掉一块的圆
ctx.fill();
}
drawArc(); // 调用绘制函数
TODO 暂时只学到这,后面有时间再继续更新,如果想了解更多内容请阅读开头给的官方教程.