canvas 基本用法_canvas用法

一、什么是canvas

Canvas 是 HTML5 新增的元素，它就像一块幕布，可通过JavaScript脚本在 Web 页面上绘制图形、动画和其他可视化内容。

二、canvas用法

<!--1.创建画布-->
<canvas id="myCanvas"></canvas> // 如果没有设置宽高，那么会自动创建一个 300 * 150 的画布（单位默认为 px）
 
 
// 2.获取绘图上下文
const canvas = document.getElementById('myCanvas')  // 获取画布节点
 
const ctx = canvas.getContext('2d') // 代表一个二维渲染上下文
 
 
// 3.设置绘制属性
canvas.width = 500    // 设置画布宽度
 
canvas.height = 500   // 设置画布高度
 
ctx.fillText('我是文本', 30, 20)  // 绘制文本内容和坐标
 
ctx.fillStyle = 'red' // 设置填充颜色
 
ctx.font = '18px Arial'  // 设置文本大小和字体
 
ctx.textAlign = 'center' // 设置水平对齐方式
 
ctx.textBaseline = "middle" // 设置垂直对齐方式
 
ctx.setLineDash([5, 5]) // 设置虚线
 
ctx.lineWidth = 2     // 设置线条宽度为2像素
 
// 4.绘制矩形
ctx.fillRect(10, 10, 10, 10)    // 绘制填充矩形
 
ctx.strokeRect(70, 10, 50, 50)  // 绘制描边矩形
 
// 5.绘制路径
ctx.beginPath()  // 开始新路径
 
ctx.moveTo(100, 100) // 移动到起始点
 
ctx.lineTo(150, 150) // 创建直线路径
 
ctx.lineTo(200, 100) // 创建直线路径
 
ctx.closePath()  // 关闭路径
 
ctx.stroke()  // 描边路径
 
ctx.fill() // 填充路径
 
// 6.清除画布内容
ctx.clearRect(0, 0, canvas.width, canvas.height)
 

canvas 常用方法如下：

三、绘制案例

1.绘制直线

<canvas id="myCanvas"></canvas>
 
const canvas = document.getElementById('myCanvas')
 
const ctx = canvas.getContext('2d')
 
// 设置直线样式
ctx.strokeStyle = 'red'  // 设置线条颜色为红色
ctx.lineWidth = 2       // 设置线条宽度为2像素
 
// 绘制直线
ctx.beginPath()
ctx.moveTo(50, 130) // 设置直线起点坐标
ctx.lineTo(260, 130) // 设置直线终点坐标
ctx.stroke() // 绘制直线
 
// 添加备注
ctx.fillStyle = 'red'
ctx.font = '18px Arial'
ctx.fillText('canvas绘制直线', 60, 200)
 

2.绘制曲线

<canvas id="myCanvas" width="500" height="500"></canvas>
 
const canvas = document.getElementById('myCanvas')
 
const ctx = canvas.getContext('2d')
 
// 设置曲线样式
ctx.strokeStyle = 'blue';  // 设置线条颜色为蓝色
ctx.lineWidth = 2;        // 设置线条宽度为2像素
 
// 绘制二次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(50, 200);  // 设置曲线起点坐标
ctx.quadraticCurveTo(150, 50, 250, 200);  // 设置控制点坐标和终点坐标
ctx.stroke();  // 绘制曲线
 
// 添加备注
ctx.fillStyle = 'black';
ctx.font = '14px Arial';
ctx.fillText('二次贝塞尔曲线', 100, 100);

3.绘制矩形

<canvas id="myCanvas"></canvas>
 
const canvas = document.getElementById('myCanvas')
 
const ctx = canvas.getContext('2d')
 
ctx.strokeStyle = 'red'
 
ctx.beginPath() // 开始绘制
 
ctx.strokeRect(50, 100, 200, 100) // 参数(x轴坐标, y轴坐标, w宽度, h高度)
 
ctx.closePath()

4.绘制圆形

<canvas id="myCanvas"></canvas>
 
const canvas = document.getElementById('myCanvas')
 
const ctx = canvas.getContext('2d')
 
// 绘制圆形
ctx.beginPath()  // 开始路径
 
ctx.arc(100, 100, 50, 0, 2*Math.PI) // 参数为 (x, y, radius, startAngle, endAngle)
 
ctx.fillStyle = 'red'  // 设置颜色
 
ctx.fill()  // 填充路径
 
ctx.closePath()  // 闭合路径

5.绘制三角形

<canvas id="myCanvas" width="500" height="500"></canvas>
 
const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')
 
// 设置三角形样式
ctx.fillStyle = 'red'  // 设置填充颜色为红色
 
// 绘制三角形
ctx.beginPath();
ctx.moveTo(150, 100)  // 设置第一个顶点坐标
ctx.lineTo(100, 200)  // 设置第二个顶点坐标
ctx.lineTo(200, 200)  // 设置第三个顶点坐标
ctx.closePath()  // 将第三个顶点与第一个顶点连接起来
ctx.fill()  // 填充三角形
 
// 添加备注
ctx.fillStyle = 'black'
ctx.font = '14px Arial'
ctx.fillText('三角形示例', 120, 80)

6.绘制扇形

<canvas id="myCanvas" width="500" height="500"></canvas>
 
const canvas = document.getElementById('myCanvas')
const ctx = canvas.getContext('2d')
 
// 设置扇形样式
ctx.fillStyle = 'red'  // 设置填充颜色为红色
 
// 绘制扇形
ctx.beginPath()
ctx.moveTo(150, 150)  // 设置圆心坐标
ctx.arc(150, 150, 100, 0, Math.PI*0.5)  // 绘制扇形路径
ctx.closePath()  // 将路径闭合
ctx.fill()  // 填充扇形
 
// 添加备注
ctx.fillStyle = 'black'
ctx.font = '14px Arial'
ctx.fillText('扇形示例', 200, 120)

7.绘制图片

<canvas id="myCanvas"></canvas>
 
const canvas = document.getElementById('myCanvas')
 
const ctx = canvas.getContext('2d')
 
const img = new Image()
 
img.src = 'https://zk-web-object.oss-cn-qingdao.aliyuncs.com/wxy/img/6.jpg'
 
img.onload = function() {
    ctx.drawImage(img, 0, 0, 200, 100) // 参数(要绘制的图片, x轴, y轴, w宽度, h高度)
}

8.绘制签名画板

    <canvas id="signCanvas" width="380" height="200"></canvas>
    
    <button class="btn" id="clearButton">清除</button>
 
    const canvas = document.getElementById('signCanvas');
    const ctx = canvas.getContext('2d');
    let isDrawing = false;
 
    // 鼠标或触摸事件开始绘制
    canvas.addEventListener('mousedown', startDrawing);
    canvas.addEventListener('touchstart', startDrawing);
 
    // 鼠标或触摸事件绘制中
    canvas.addEventListener('mousemove', draw);
    canvas.addEventListener('touchmove', draw);
 
    // 鼠标或触摸事件结束绘制
    canvas.addEventListener('mouseup', stopDrawing);
    canvas.addEventListener('touchend', stopDrawing);
    canvas.addEventListener('mouseout', stopDrawing);
 
    // 清除按钮点击事件
    const clearButton = document.getElementById('clearButton');
    clearButton.addEventListener('click', clearCanvas);
 
    // 开始绘制
    function startDrawing(e) {
        isDrawing = true;
        const { offsetX, offsetY } = getOffset(e);
        ctx.beginPath();
        ctx.moveTo(offsetX, offsetY);
    }
 
    // 绘制中
    function draw(e) {
        if (!isDrawing) return;
        const { offsetX, offsetY } = getOffset(e);
        ctx.lineTo(offsetX, offsetY);
        ctx.stroke();
    }
 
    // 结束绘制
    function stopDrawing() {
        isDrawing = false;
    }
 
    // 清除画布
    function clearCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }
 
    // 获取鼠标或触摸事件的偏移量
    function getOffset(e) {
        const rect = canvas.getBoundingClientRect();
        let offsetX, offsetY;
        if (e.type.includes('touch')) {
            offsetX = e.touches[0].clientX - rect.left;
            offsetY = e.touches[0].clientY - rect.top;
        } else {
            offsetX = e.offsetX;
            offsetY = e.offsetY;
        }
        return { offsetX, offsetY };
    }

9.绘制行星运行图

    const canvas = document.getElementById('myCanvas')
    const ctx = canvas.getContext('2d')
 
    // 定义太阳系中行星的数据
    const planets = [
        { name: 'Sun', radius: 50, distance: 0, speed: 0, color: 'yellow' },
        { name: 'Mercury', radius: 5, distance: 100, speed: 0.02, color: 'gray' },
        { name: 'Venus', radius: 8, distance: 150, speed: 0.015, color: 'orange' },
        { name: 'Earth', radius: 10, distance: 200, speed: 0.01, color: 'blue' },
        { name: 'Spark', radius: 7, distance: 242, speed: 0.008, color: 'red' }
    ]
 
    // 动画循环
    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height)
 
        // 绘制太阳
        ctx.beginPath()
        ctx.arc(canvas.width / 2, canvas.height / 2, planets[0].radius, 0, Math.PI * 2)
        ctx.fillStyle = planets[0].color
        ctx.fill()
 
        // 绘制行星和轨道
        for (let i = 1; i < planets.length; i++) {
            const planet = planets[i]
            planet.angle = (planet.angle || 0) + planet.speed
 
            const x = canvas.width / 2 + planet.distance * Math.cos(planet.angle)
            const y = canvas.height / 2 + planet.distance * Math.sin(planet.angle)
 
            // 绘制轨道
            ctx.beginPath()
            ctx.arc(canvas.width / 2, canvas.height / 2, planet.distance, 0, Math.PI * 2)
            ctx.strokeStyle = '#999'
            ctx.stroke()
 
            // 绘制行星
            ctx.beginPath()
            ctx.arc(x, y, planet.radius, 0, Math.PI * 2)
            ctx.fillStyle = planet.color
            ctx.fill()
        }
 
        requestAnimationFrame(draw)
    }
 
    // 启动动画
    draw()

 四、canvas应用场景

五、canvas实现小游戏

​贪吃蛇
http://zk-web-object.oss-cn-qingdao.aliyuncs.com/wxy/canvas/game01.html

俄罗斯方块
https://zk-web-object.oss-cn-qingdao.aliyuncs.com/wxy/canvas/game02.html