文章目录
认识Canvas
canvas就是一个画板,可以使用canvas在页面上画出想要的图形。
标签<canvas></canvas>
使用canvas标签需要设置三个属性:
- id:画板的标识
- width: 画板的宽度
- height: 画板的高度
eg:设置一个600*600的画板
<canvas
id = "canvas1"
width="600"
height="600"
></canvas>
学习官网:https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API
判断当前浏览器是否支持
//如果浏览器不支持canvas就直接将canvas识别为普通标签就会显示标签中的内容
<canvas
id = "canvas1"
width="600"
height="600"
style="background: lightgray"
>
当前浏览器不支持canvas
· </canvas>
<script>
// 找到画布
var canvas1 = document.getElementById("canvas1")
if(!canvas1.getContext){
console.log("当前浏览器不支持canvas");
}
</script>
描绘图形
canvas是一个画板,我们可以在画板上绘制。
绘制方法:
-
- 找画布
-
- 获取画笔
-
- 绘制图形
**当绘制的图像超出画布,则超出的部分不会显示**
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 画布 -->
<canvas
id = "canvas1"
width="600"
height="600"
></canvas>
<script>
// 找到画布
var canvas1 = document.getElementById("canvas1")
// 获取画笔(这里是2d画笔)
var ctx = canvas1.getContext("2d")
// 绘制图形
// 1.绘制长方形: fillRect(位置x, 位置y, 宽, 高 )
ctx.fillRect(100, 200, 300, 300)
</script>
</body>
</html>
画笔
canvas最重要的就是画笔,可以通过画笔上的属性和方法绘制出不同样式的各种图形。
1. 画笔的属性:
- direction
- fillStyle : 填充颜色
- filter
- font : 字体
- fontKerning:
- fontStretch:
- fontVariantCaps:
- globalAlpha:
- globalCompositeOperation:
- imageSmoothingEnabled:
- imageSmoothingQuality:
- letterSpacing:
- lineCap:
- lineDashOffset:
- lineJoin:
- lineWidth:
- miterLimit:
- shadowBlur:
- shadowColor:
- shadowOffsetX:
- shadowOffsetY:
- strokeStyle:
- textAlign:
- textBaseline:
- textRendering:
- wordSpacing:
2. 画笔的方法:
- arc
- arcTo
- beginPath
- bezierCurveTo
- canvas
… …
具体的属性和方法的使用可以查看:https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D
几种图形演示
实心矩形
画笔.fillRect(位置x, 位置y, 宽, 高 )
eg:(在上述画布基础上绘制)
ctx.fillRect(100, 200, 300, 200)
画笔.fillRect(位置x, 位置y, 宽, 高 )
,可以拆开写成
画笔.rect(位置x, 位置y, 宽, 高 )
——绘制矩形路径画笔.fill()
——填充矩形
fill的原理:取画笔的起点和终点进行连接,形成闭合图形再进行填充。
空心矩形
画笔.strokeRect(位置x, 位置y, 宽, 高 )
eg:
ctx.strokeRect(100, 200, 300, 200)
画笔.strokeRect(位置x, 位置y, 宽, 高 )
,可以拆开写成
画笔.rect(位置x, 位置y, 宽, 高 )
——绘制矩形路径画笔.stroke()
——显示矩形
圆弧
画笔.arc(圆心x, 圆心y, 半径, 开始的角度, 结束的角度,逆时针/顺时针)
- 至少有5个参数(前5个参数)
- 逆时针/顺时针参数:默认是顺时针绘制,设置成
true
表示逆时针绘制
度数方向:
eg:
- 360度圆弧
ctx.arc(200,200, 100,0, Math.PI*2)
ctx.stroke()
- 180度圆弧
ctx.arc(200,200, 100,0, Math.PI)
ctx.stroke()
绘制线段
画笔.lineTo(终点x,终点y)
eg:
绘制三角形
ctx.beginPath()
ctx.moveTo(300,200)
ctx.lineTo(350,250)
ctx.lineTo(300,250)
ctx.lineTo(300,200)
ctx.stroke()
ctx.closePath()
arcTo绘制圆弧
绘制原理:三点一半径进行圆弧绘制。所绘制出的圆和两条线相切
eg:
ctx.beginPath()
ctx.moveTo(300,200)
ctx.arcTo(300,250,250,250, 50)
ctx.stroke()
ctx.closePath()
二次贝塞尔曲线
二次贝塞尔曲线是根据三个点(两个控制点)绘制出一条曲线。
eg:
P0:起点; P1:控制点1; P2:控制点2
画笔.quadraticCurveTo(控制点1,控制点2)
eg:气泡
// 找到画布
var canvas1 = document.getElementById("canvas1")
// 获取画笔(这里是2d画笔)
var ctx = canvas1.getContext("2d")
// 绘制图形
ctx.beginPath()
ctx.moveTo(200,300)
ctx.quadraticCurveTo(150,300,150,200)
ctx.quadraticCurveTo(150,100,300,100)
ctx.quadraticCurveTo(450,100,450,200)
ctx.quadraticCurveTo(450,300,250,300)
ctx.quadraticCurveTo(250,350,150,350)
ctx.quadraticCurveTo(200,350,200,300)
ctx.stroke()
ctx.closePath()
三次贝塞尔曲线
三次贝塞尔曲线是根据四个点(三个控制点)绘制出一条曲线。
画笔.quadraticCurveTo(控制点1,控制点2)
eg:爱心
// 找到画布
var canvas1 = document.getElementById("canvas1")
// 获取画笔(这里是2d画笔)
var ctx = canvas1.getContext("2d")
// 绘制图形
ctx.beginPath()
ctx.moveTo(300,200)
ctx.bezierCurveTo(380,100,430,230, 300, 300)
ctx.moveTo(300,200)
ctx.bezierCurveTo(220,100,170,230, 300, 300)
ctx.stroke()
ctx.closePath()
图像的清除
清除画布上绘制的图像:画笔.clearRect(起点x,起点y, 终点x, 终点y)
应用:实现从上往下清除图像的效果
let height = 0
const t1 = setInterval(()=>{
if(height<=canvas1.clientHeight) {
height++;
ctx.clearRect(0,0,canvas1.clientWidth, height)
}else{
clearInterval(t1)
}
},10)
开始绘制和结束绘制
画笔开始绘制: 画笔.beginPath()
画笔结束绘制: 画笔.closePath()
应用场景:
目标绘制一个空心长方形和一个实心长方形。
// 绘制空心长方形
ctx.rect(100, 200, 300, 200)
ctx.stroke()
// 绘制实心长方形
ctx.rect(250, 300, 300, 200)
ctx.fill()
效果:
原因:因为绘制好空心长方形之后没有 ”抬笔“ ,就会认为空心长方形和后面绘制的长方形是一个图案,填充的时候就会一起填充。
解决:使用画笔.beginPath()
和 画笔.closePath()
// 绘制空心长方形
ctx.beginPath()
ctx.rect(100, 200, 300, 200)
ctx.stroke()
ctx.closePath()
// 绘制实心长方形
ctx.beginPath()
ctx.rect(250, 300, 300, 200)
ctx.fill()
ctx.closePath()
效果:
moveTo 画笔断开
使用moveTo
可以直接进行画笔的移动无需使用beginPath()
和closePath()
使用: 画笔.moveTo(移动到的x,移动到的y)
路径的封装
使用Path2D()
,使用path2D创造出路径之后,直接在路径上进行画画。封装好之后直接使用画笔.stroke(路径)
就可以进行图像的绘制。
eg:封装爱心路径
<script>
// 找到画布
var canvas1 = document.getElementById("canvas1")
if(!canvas1.getContext){
console.log("当前浏览器不支持canvas");
}
// 获取画笔(这里是2d画笔)
var ctx = canvas1.getContext("2d")
var heartPath = new Path2D()
heartPath.moveTo(300,200)
heartPath.bezierCurveTo(380,100,430,230, 300, 300)
heartPath.moveTo(300,200)
heartPath.bezierCurveTo(220,100,170,230, 300, 300)
ctx.stroke(heartPath)
</script>
Path2D字符串写法绘制路径
(即svg写法)
eg:正方形
// M10 10: 起点 (10, 10)
// h 80:水平移动80
// v 80:垂直移动80
// h -80: 水平移动-80
// z:回到原点
var testPath = new Path2D("M10 10 h 80 v 80 h -80 z")
ctx.stroke(testPath)
案例
描绘笑脸
效果:
方案一:使用beginPath和closePath进行图形绘制
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- -->
<canvas
id = "canvas1"
width="600"
height="600"
style="background: lightgray"
></canvas>
<script>
// 找到画布
var canvas1 = document.getElementById("canvas1")
// 获取画笔(这里是2d画笔)
var ctx = canvas1.getContext("2d")
// 绘制图形
ctx.beginPath()
ctx.arc(200,200, 100,0, Math.PI*2)
ctx.stroke()
ctx.closePath()
ctx.beginPath()
ctx.arc(200,200, 70,0, Math.PI)
ctx.stroke()
ctx.closePath()
ctx.beginPath()
ctx.arc(150,180, 25,0, Math.PI, true)
ctx.stroke()
ctx.closePath()
ctx.beginPath()
ctx.arc(250,180, 25,0, Math.PI, true)
ctx.stroke()
ctx.closePath()
</script>
</body>
</html>
方案二:使用moveTo进行画笔断开
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- -->
<canvas
id = "canvas1"
width="600"
height="600"
style="background: lightgray"
></canvas>
<script>
// 找到画布
var canvas1 = document.getElementById("canvas1")
// 获取画笔(这里是2d画笔)
var ctx = canvas1.getContext("2d")
// moveTo实现
ctx.arc(200,200, 100,0, Math.PI*2)
ctx.moveTo(270, 200)
ctx.arc(200,200, 70,0, Math.PI)
ctx.moveTo(175, 180)
ctx.arc(150,180, 25,0, Math.PI, true)
ctx.moveTo(275, 180)
ctx.arc(250,180, 25,0, Math.PI, true)
ctx.stroke()
</script>
</body>
</html>