简单的canvas实用小case2

最新推荐文章于 2024-08-24 12:37:57 发布

莫奈的日出

最新推荐文章于 2024-08-24 12:37:57 发布

阅读量83

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_52993364/article/details/125299806

版权

案例四：画同心圆

代码：

<!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>circle</title>
</head>

<body>
    <canvas></canvas>
</body>
<script>
    let canvas = document.querySelector("canvas");
    let ctx = canvas.getContext('2d');
    let sw = window.innerWidth;
    let sh = window.innerHeight;
    canvas.width = sw;
    canvas.height = sh;
    let timer = null;
    let sa = 0;
    let ea = 0;//结束弧度
    let speed = Math.PI / 180;
    let r = 20;
    let drawCircle = (obj) => {
        ea += speed;
        ctx.beginPath();
        ctx.arc(obj.x, obj.y, r, sa, ea, false);
        ctx.lineWidth = obj.lw;
        ctx.strokeStyle = obj.color;
        ctx.stroke();
        if (ea >= Math.PI * 2) {
            r += 20;
            ea = 0;
            if(r>=300){
                clearInterval(timer);
            }
        }
    }
    timer = setInterval(() => {
        // ctx.clearRect(0, 0, sw, sh);
        drawCircle({
            x: sw / 2,
            y: sh / 2,

            lw: 5,//线宽
            color: 'tomato'
        })
    }, 10)
</script>

</html>

效果：circle1-CSDN直播使用canvas画circlehttps://live.csdn.net/v/216521

案例5：画圆

代码：

<!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>circle</title>
</head>

<body>
    <canvas></canvas>
</body>
<script>
    let canvas = document.querySelector("canvas");
    let ctx = canvas.getContext('2d');
    let sw = window.innerWidth;
    let sh = window.innerHeight;
    canvas.width = sw;
    canvas.height = sh;
    let timer = null;
    // 绘制圆
    function Circle(obj) {
        this.x = obj.x;
        this.y = obj.y;
        this.r = 4;
        this.color = 'hotpink';
    }
    Circle.prototype.draw = function () {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
        ctx.fillStyle = this.color;
        ctx.fill();

    }
    // 自定义圆心
    let x = sw / 2;
    let y = sh / 2;
    let r = 300;
    let speed = Math.PI / 180;
    let na = 0;
    timer = setInterval(() => {
        na += speed;
        r-=0.05;
        if(r<=0){
            clearInterval(timer);
        }
        // if (na >= Math.PI * 2) {
        //     r -= 40;
        //     na = 0;
        //     if (r <= 0) {
        //         clearInterval(timer);
        //     }
        // }
        let cx = Math.cos(na) * r + x;
        let cy = Math.sin(na) * r + y;
        let c = new Circle({
            x: cx,
            y: cy
        });
        c.draw();
    }, 30)
</script>

</html>

效果：circle2-CSDN直播使用canvas画圆https://live.csdn.net/v/216522

案例6：drawImage

代码：

<!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></canvas>
</body>
<script>
    let canvas = document.querySelector("canvas");
    let ctx = canvas.getContext('2d');
    let sw = window.innerWidth;
    let sh = window.innerHeight;
    canvas.width = sw;
    canvas.height = sh;
    let img = new Image();
    img.onload = function () {
        ctx.drawImage(img, 0, 0, 600, 680);
        lj();
    }
    img.src = 'img/许凯.jpeg';
    function lj() {
        let imageData = ctx.getImageData(0, 0, 600, 680);
        // console.log(data);
        fs(imageData);
    }
    // 反色
    function fs(data) {
        ctx.clearRect(0, 0, 600, 680);
        for (let i = 0; i < data.data.length; i++) {
            if (i % 4 == 3) {
                continue;
            }
            data.data[i] = 255 - data.data[i];
        }
        // 将数据显示在canvas中
        ctx.putImageData(data,0,0);
    }
</script>

</html>

效果图：

案例7：使用贝塞尔曲线画心

二次贝塞尔：

代码：

<!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></canvas>
</body>
<script>
     let canvas = document.querySelector("canvas");
    let ctx = canvas.getContext('2d');
    let sw = window.innerWidth;
    let sh = window.innerHeight;
    canvas.width = sw;
    canvas.height = sh;
    function be2(){
        ctx.beginPath();
        ctx.moveTo(200,200);
        ctx.quadraticCurveTo(50,150,200,350);
        ctx.fillStyle = 'pink';
        ctx.fill();

        ctx.beginPath();
        ctx.moveTo(200,200);
        ctx.quadraticCurveTo(350,150,200,350);
        ctx.fillStyle = 'pink';
        ctx.fill();
    }
    be2();
    
</script>

</html>

效果图：

三次贝塞尔：

代码：

<!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></canvas>
</body>
<script>
     let canvas = document.querySelector("canvas");
    let ctx = canvas.getContext('2d');
    let sw = window.innerWidth;
    let sh = window.innerHeight;
    canvas.width = sw;
    canvas.height = sh;
    function be3(){
        ctx.beginPath();
        ctx.moveTo(200,200);
        ctx.bezierCurveTo(50,100,50,330,200,350);
        ctx.fillStyle = 'red';
        ctx.fill();

        ctx.beginPath();
        ctx.moveTo(200,200);
        ctx.bezierCurveTo(350,100,350,330,200,350);
        ctx.fillStyle = 'hotpink';
        ctx.fill();
    }
    be3();
</script>

</html>

效果：