canvas 入门
程序员文章站
2022-06-04 16:16:44
...
日期：2020 年 5 月 8 日
canvas 学习笔记
canvas 简介
canvas 是一个用来绘图的 html5 标签，但是 < canvas> 标签本身并不具备绘图能力，实际的绘图需要借助 js 脚本来完成，而具体做这件事情的就是 getContext(‘2d’) 这个对象，这个对象提供的各种属性及方法可以让我们很方便地完成线条，图形，文字，图像等的绘制
以下为使用 canvas 的几个最基本的绘图功能
画线
<canvas id="myCanvas"
width="200"
height="100"
style="border: 1px solid #000"
>
您的浏览器不支持 HTML5 canvas 标签
</canvas>
<script>
let c = document.getElementById('myCanvas')
let cxt = c.getContext('2d')
cxt.moveTo(0,0)
cxt.lineTo(50,50)
cxt.lineTo(70,15)
cxt.lineTo(90,90)
cxt.stroke()
</script>
效果：
这里有几个路径相关的方法需要注意：
- moveTo() 把路径移动到画布中的指定点，不创建线条
- lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条
- stroke() 绘制已定义的路径
绘制矩形
<!DOCTYPE html>
<html lang="en">
<body>
<canvas id="myCanvas"
width="200"
height="100"
style="border: 1px solid #000"
>
您的浏览器不支持 HTML5 canvas 标签
</canvas>
<script>
let c = document.getElementById('myCanvas')
let cxt = c.getContext('2d')
cxt.beginPath()
cxt.fillStyle = '#FF0000'
cxt.fillRect(10,10,50,50)
cxt.closePath()
cxt.beginPath()
cxt.strokeStyle = '#FF0000'
cxt.strokeRect(70,10,100,50)
cxt.closePath()
</script>
</body>
效果:
这里需要注意的有两点：
- 填充颜色与路径颜色：
fillStyle : 设置填充的颜色、渐变或模式
strokeStyle : 设置笔触（路径）的颜色、渐变或模式 - 绘制实心矩形与空心矩形：
fillRect() : 绘制实心矩形，参数为左上角的坐标及矩形宽高
strokeRect() : 绘制空心矩形，参数为左上角的坐标及矩形宽高
绘制圆（弧）形
<canvas id="myCanvas"
width="200"
height="100"
style="border: 1px solid #000"
>
您的浏览器不支持 HTML5 canvas 标签
</canvas>
<script>
let c = document.getElementById('myCanvas')
let cxt = c.getContext('2d')
cxt.beginPath()
cxt.arc(50,50,40,0,2*Math.PI)
cxt.stroke()
cxt.beginPath()
cxt.arc(150,50,40,0,1.5*Math.PI)
cxt.stroke()
</script>
效果：
这里要注意绘制圆（弧）形用到的方法是 arc() 方法，该方法接受5个固定参数合一个可选参数，如下：
颜色渐变
1、线性渐变
<canvas id="myCanvas"
width="200"
height="100"
style="border: 1px solid #000"
>
您的浏览器不支持 HTML5 canvas 标签
</canvas>
<script>
// 线性渐变
let c = document.getElementById('myCanvas')
let cxt = c.getContext('2d')
cxt.beginPath()
let grd1 = cxt.createLinearGradient(0,0,0,50) // 创建从上往下的线性渐变
grd1.addColorStop(0, 'black')
grd1.addColorStop(1, 'white')
cxt.fillStyle = grd1
cxt.fillRect(10,10, 150,50)
cxt.closePath()
cxt.beginPath()
let grd2 = cxt.createLinearGradient(0,0,150,0) // 创建从左往右的线性渐变
grd2.addColorStop(0, 'black')
grd2.addColorStop(1, 'white')
cxt.fillStyle = grd2
cxt.fillRect(10,70, 150,20)
cxt.closePath()
</script>
效果:
这里用到的方法是 createLinearGradient() , 该方法接受四个参数，前两个参数为渐变开始的点 的坐标，后两个参数为渐变结束的点的坐标，以此来确实渐变的方向
2、放射性渐变
<canvas id="myCanvas"
width="200"
height="100"
style="border: 1px solid #000"
>
您的浏览器不支持 HTML5 canvas 标签
</canvas>
<script>
let c = document.getElementById('myCanvas')
let cxt = c.getContext('2d')
let grd = cxt.createRadialGradient(50,50,10,50,50,100)
grd.addColorStop(0, 'green')
grd.addColorStop(1, 'blue')
cxt.fillStyle = grd
cxt.fillRect(10,10, 150,80)
</script>
效果：
文字绘制
<canvas id="myCanvas1"
width="200"
height="100"
style="border: 1px solid #000"
>
您的浏览器不支持 HTML5 canvas 标签
</canvas>
<canvas id="myCanvas2"
width="200"
height="100"
style="border: 1px solid #000"
>
您的浏览器不支持 HTML5 canvas 标签
</canvas>
<script>
// 实心文字
let c1 = document.getElementById('myCanvas41)
let cxt1 = c1.getContext('2d')
cxt1.font = '15px Arial'
cxt1.fillText('canvas text', 20,20)
// 空心文字
let c2 = document.getElementById('myCanvas2')
let cxt2 = c2.getContext('2d')
cxt2.font = '20px Arial'
cxt2.strokeText('canvas text', 50,50)
</script>
效果：
这里要注意的是绘制文字的时候需要设置字号及字体，可以通过 font 属性设置
绘制文字有 fillText() 和 strokeText() 两个方法，他们都接受3个参数，需要绘制的文字，及文字开始绘制的位置坐标，不同的是前一个方法用来绘制实心文字，而后一个方法用来绘制空心文字
图像绘制
<image id="picture" src="via.jpg" width="140" height="90"></image>
<canvas
id="myCanvas"
width="200"
height="100"
style="border: 1px solid #000"
>
您的浏览器不支持 HTML5 canvas 标签
</canvas>
<script>
// 绘制图片
let c = document.getElementById('myCanvas')
let cxt = c.getContext('2d')
let pic = document.getElementById('picture')
pic.onload = function() {
cxt.drawImage(pic,10,10,140,90);
}
</script>
效果：
上图左侧为一个 标签，右侧为通过 绘制出来的图像，需要注意的是使用
canvas 绘制图像需要在图像加载完毕之后再进行，即上述的 onload() 事件完成后进行图像绘制，绘制图像使用的方法为 drawImage()，接受三个固定参数和6个可选参数，如下：
上一篇： Python接口测试