认识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是一个画板，我们可以在画板上绘制。
绘制方法：

1. 找画布
1. 获取画笔
1. 绘制图形

**当绘制的图像超出画布，则超出的部分不会显示**
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:(在上述画布基础上绘制)

扫描二维码关注公众号，回复： 14555314 查看本文章

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>

Canvas——路径绘制

文章目录

认识Canvas

判断当前浏览器是否支持

描绘图形

画笔

几种图形演示

实心矩形

空心矩形

圆弧

绘制线段

arcTo绘制圆弧

二次贝塞尔曲线

三次贝塞尔曲线

图像的清除

开始绘制和结束绘制

moveTo 画笔断开

路径的封装

Path2D字符串写法绘制路径

案例

描绘笑脸

方案一：使用beginPath和closePath进行图形绘制

方案二：使用moveTo进行画笔断开

猜你喜欢