canvas使用

最新推荐文章于 2024-08-17 10:48:07 发布

Hui-1018

最新推荐文章于 2024-08-17 10:48:07 发布

阅读量838

点赞数

文章标签： canvas

本文链接：https://blog.csdn.net/King0217/article/details/113557667

版权

一、小球落体运动

贴一个比较好玩的demo，模拟小球落体运动。先让大家对canvas有一个感知。它到底能做什么。。。

效果演示：
在这里插入图片描述

Html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="index.js" type="application/javascript"></script>
</head>
<body>
<div class="page">
    <canvas id="canvas" width="800" height="600" style="border: 1px solid #000;"></canvas>
</div>
</body>
<style>
    body, html {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        font-size: 16px;
    }

    .page {
        margin: 100px;
        width: 100%;
        height: 100%;
    }


</style>

</html>

js代码：

window.onload = function () {

    let canvas = document.getElementById('canvas');
    let cxt = canvas.getContext('2d');


    // 小球属性
    let ball = {x: 20, y: 80, radius: 10, vx: 5, vy: -10, g: 2}

    let timer = setInterval(() => {
        update();
        draw(cxt);

    }, 50);

    function draw(cxt) {
        cxt.clearRect(0, 0, cxt.canvas.width, cxt.canvas.height)
        cxt.beginPath();
        cxt.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, true)
        cxt.fillStyle = 'blue'
        cxt.closePath();
        cxt.fill();
        console.log(ball.x, ball.y)
    };


    function update() {
        ball.x += ball.vx;
        ball.y += ball.vy;
        ball.vy += ball.g;
        if (ball.y >= 600 - ball.radius) {
            ball.y = 600 - ball.radius;
            ball.vy = -ball.vy * 0.6;
        }
        //滚出屏幕外 停止绘制
        if (ball.x > 800 + ball.radius) {
            window.clearInterval(timer)
        }
    }
}

通过这个例子我们讲解一下canvas的基本使用方法，以及常用api的讲解。

首先我们html中定义canvas标签: <canvas id=“canvas” width=“800” height=“600” style=“border: 1px solid #000;”>
其此在JavaScript中获取到该标签对象： let canvas = document.getElementById(‘canvas’);
然后获取canvas的上下文环境：let cxt = canvas.getContext(‘2d’); （注意：canvas基于状态绘图，而不是对象。所以后续绘图都使用上下文环境cxt）。
最后灵活使用canvas内部api，就可以绘制出各种绚丽的效果。具体api参考w3c文档。

二、起步

moveTo() 把路径移动到画布中的指定点，不创建线条;
lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条;
stroke() 绘制已定义的路径。

如：

    let canvas = document.getElementById('canvas');
    let cxt = canvas.getContext('2d');
    //画笔触点
    cxt.moveTo(200, 200);
    //创建从触点到300 ，300 的线条
    cxt.lineTo(300, 300);
    cxt.lineTo(200, 300);
    //绘制路径
    cxt.stroke();

在这里插入图片描述

lineWidth 设置或返回当前的线条宽度
strokeStyle: 设置或返回用于笔触的颜色、渐变或模式

let canvas = document.getElementById('canvas');
    let cxt = canvas.getContext('2d');
    //画笔触点
    cxt.moveTo(200, 200);
    //创建从触点到300 ，300 的线条
    cxt.lineTo(300, 300);
    cxt.lineTo(200, 300);
    //绘制路径

    //画笔颜色
    cxt.strokeStyle = 'blue'
    //线条宽度
    cxt.lineWidth = 5;
    cxt.stroke();

在这里插入图片描述

beginPath() 起始一条路径，或重置当前路径
closePath() 创建从当前点回到起始点的路径

一般成对出现

let canvas = document.getElementById('canvas');
    let cxt = canvas.getContext('2d');
    //画笔触点
    cxt.moveTo(200, 200);
    //创建从触点到300 ，300 的线条
    cxt.lineTo(300, 300);
    cxt.lineTo(200, 300);
    //绘制路径

    //画笔颜色
    cxt.strokeStyle = 'blue'
    //线条宽度
    cxt.lineWidth = 5;
    cxt.stroke();

    /**
     * 这里另外划了一条垂直线段，并且设置新的线条颜色。
     */
    cxt.moveTo(400,400)
    cxt.lineTo(400,500)
    cxt.strokeStyle = 'green'
    cxt.stroke();

发现前面画的折线也变成绿色的，这是因为canvs基于状态管理，所以就需要另外一个接口beginPath()。重置当前路径，起到状态隔离的作用。
在这里插入图片描述

    let canvas = document.getElementById('canvas');
    let cxt = canvas.getContext('2d');
    //画笔触点
    cxt.moveTo(200, 200);
    //创建从触点到300 ，300 的线条
    cxt.lineTo(300, 300);
    cxt.lineTo(200, 300);
    //绘制路径

    //画笔颜色
    cxt.strokeStyle = 'blue'
    //线条宽度
    cxt.lineWidth = 5;
    cxt.stroke();

    /**
     * 这里另外划了一条垂直线段，并且设置新的线条颜色。
     */
    cxt.beginPath();//重置路径 隔离状态
    cxt.moveTo(400, 400)
    cxt.lineTo(400, 500)
    cxt.strokeStyle = 'green'
    cxt.stroke();

在这里插入图片描述
closePath,形成回路路径，画当前点到起点的路径。

  let canvas = document.getElementById('canvas');
    let cxt = canvas.getContext('2d');

    cxt.beginPath();
    //画笔触点
    cxt.moveTo(200, 200);
    //创建从触点到300 ，300 的线条
    cxt.lineTo(300, 300);
    cxt.lineTo(200, 300);
    // 当前点到起点的路径，形成回路
    cxt.closePath();

    //画笔颜色
    cxt.strokeStyle = 'blue'
    //线条宽度
    cxt.lineWidth = 5;
    cxt.stroke();

在这里插入图片描述

fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
fill() 填充当前绘图（路径）

    let canvas = document.getElementById('canvas');
    let cxt = canvas.getContext('2d');

    cxt.beginPath();
    //画笔触点
    cxt.moveTo(200, 200);
    //创建从触点到300 ，300 的线条
    cxt.lineTo(300, 300);
    cxt.lineTo(200, 300);
    // 当前点到起点的路径，形成回路
    cxt.closePath();

    //填充颜色
    cxt.fillStyle = 'yellow'
    //填充绘制
    cxt.fill()