canvas[学习笔记一]

卡兹
132 阅读1分钟

canvas-01

canvas绘图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas绘图</title>
    <style>
        #canvas{
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600" height="700">
        不兼容
    </canvas>
    <script>
        //获取画布
        const canvas = document.querySelector('#canvas');
        // canvas.width=300;
        // canvas.height=150;
        //画笔
        const ctx=canvas.getContext('2d');
        //颜色 红色
        ctx.fillStyle='red';
        //形状 矩形
        ctx.fillRect(50,100,400,200);
    </script>
</body>
</html>

canvas绘制矩形

<script>
    const canvas=document.getElementById('canvas');
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;

    //画笔
    const  ctx=canvas.getContext('2d');

    //填充色
    ctx.fillStyle='maroon';
    //描边色
    ctx.strokeStyle='yellow';

    //描边宽度
    ctx.lineWidth=40;

    /*填充矩形方法：fillRect(x,y,w,h)*/
    // ctx.fillRect(50,50,200,100);

    /*描边矩形方法：strokeRect(x,y,w,h)*/
    ctx.strokeRect(50,50,200,100);

    /*清理矩形方法：clearRect(x,y,w,h)*/
    ctx.clearRect(50,50,200,100);
</script>

canvas绘制路径

1、绘制直线和弧线

<script>
    const canvas=document.getElementById('canvas');
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    const  ctx=canvas.getContext('2d');

    /*
    1.开始建立路径：beginPath()
    2.向路径集合中添加子路径：
    [
        形状; closePath() 可选,
        moveTo(x,y); 形状; closePath() 可选,
        moveTo(x,y); 形状; closePath() 可选,
    ]
    3.显示路径：填充fill() ，描边stroke()
    */

    /*直线：lineTo(x,y); */
    /*ctx.beginPath();
    ctx.moveTo(50,50);
    ctx.lineTo(400,50);
    ctx.lineTo(400,200);
    ctx.closePath();
    ctx.stroke();*/

    /*arc(x,y,半径，开始弧度，结束弧度，方向)*/
    /*ctx.beginPath();
    ctx.arc(400,400,200,0,Math.PI*3/2);
    ctx.moveTo(400+200,600);
    ctx.arc(400,600,200,0,Math.PI*3/2);
    ctx.stroke();*/

    /*切线圆弧：arcTo(x1,y1,x2,y2,半径)*/
    /*ctx.beginPath();
    ctx.moveTo(50,50);
    ctx.lineTo(400,50);
    ctx.lineTo(400,200);
    ctx.stroke();*/

    ctx.beginPath();
    ctx.moveTo(50,50);
    ctx.arcTo(400,50,400,200,100);
    ctx.stroke();

</script>

切线圆弧.jpg

            切线圆弧图

2、二次贝塞尔曲线和三次贝塞尔曲线和矩形

<script>
    const canvas=document.getElementById('canvas');
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    const  ctx=canvas.getContext('2d');
    
    /*二次贝塞尔曲线：quadraCurverTo(cpx1,cpy1,x,y)*/
    /*ctx.beginPath();
    ctx.moveTo(50,50);
    ctx.lineTo(400,50);
    ctx.lineTo(400,200);
    ctx.stroke();*/

    /*ctx.beginPath();
    ctx.moveTo(50,50);
    ctx.quadraticCurveTo(400,50,400,200);
    ctx.stroke();*/


    /*三次贝塞尔曲线：bezierCurverTo(cpx1,cpy1,cpx2,cpy2,x,y)*/
    /*ctx.beginPath();
    ctx.moveTo(50,50);
    ctx.lineTo(400,50);
    ctx.lineTo(400,200);
    ctx.lineTo(700,200);
    ctx.stroke();*/

    /*ctx.beginPath();
    ctx.moveTo(50,50);
    ctx.bezierCurveTo(
        400,50,
        400,200,
        700,200
    );
    ctx.stroke();*/

    /*矩形：rect(x,y,w,h)*/
    ctx.beginPath();
    ctx.rect(50,50,400,200);
    ctx.rect(50,350,400,200);
    ctx.fill();

</script>

机器人

1、蛮干版本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>机器人</title>
    <style>
        body{margin: 0;overflow: hidden;}
        #canvas{background: antiquewhite;}
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    //canvas充满窗口
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    //画笔
    const  ctx=canvas.getContext('2d');

    //颜色
    //填充色
    ctx.fillStyle='red';

    //描边宽度
    ctx.lineWidth=40;

    /*
    面部
    填充方法：fillRect(x,y,w,h)
    */
    ctx.fillRect(50,250,400,200);

    /*
    面部轮廓
    描边方法：strokeRect(x,y,w,h)
    */
    ctx.strokeRect(50,250,400,200);

    /*
    眼罩
    清理矩形方法：clearRect(x,y,w,h)
    */
    ctx.clearRect(50,300,400,60);

    /*
    嘴巴
    直线：lineTo(x,y)
    */
    ctx.beginPath();
    ctx.moveTo(150,400);
    ctx.lineTo(350,400);
    ctx.stroke();

    /*
    眼睛
    arc(x,y,半径，开始弧度，结束弧度，方向)
    */
    ctx.beginPath();
    ctx.arc(150,330,20,0,Math.PI*2);
    ctx.moveTo(350-20,340);
    ctx.arc(350,340,20,Math.PI,Math.PI*2);
    ctx.fill();

    /*
    天线
    bezierCurverTo(cpx1,cpy1,cpx2,cpy2,x,y)
    */
    ctx.beginPath();
    ctx.moveTo(50,50);
    ctx.bezierCurveTo(
        150,50,
        150,250,
        250,250
    );
    ctx.moveTo(450,50);
    ctx.bezierCurveTo(
        350,50,
        350,250,
        250,250
    );
    ctx.stroke();

</script>
</body>
</html>

机器人.jpg

2、封装版本

<script>
    const canvas=document.getElementById('canvas');
    //canvas充满窗口
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    //画笔
    const  ctx=canvas.getContext('2d');

    //绘图
    function render(color='red'){
        //颜色
        ctx.fillStyle=color;

        //描边宽度
        ctx.lineWidth=40;

        //矩形
        //面部矩形
        ctx.fillRect(50,250,400,200);
        //面部轮廓
        ctx.strokeRect(50,250,400,200);
        //面部擦除
        ctx.clearRect(50,300,400,60);

        //路径
        //直线
        ctx.beginPath();
        ctx.moveTo(150,400);
        ctx.lineTo(350,400);
        ctx.stroke();

        //圆形
        ctx.beginPath();
        ctx.arc(150,330,20,0,Math.PI*2);
        ctx.fill();

        //半圆
        ctx.beginPath();
        ctx.arc(350,340,20,-Math.PI,0);
        ctx.fill();

        //三次贝塞尔曲线
        ctx.beginPath();
        ctx.moveTo(50,50);
        ctx.bezierCurveTo(150,50,150,250,250,250);
        ctx.moveTo(450,50);
        ctx.bezierCurveTo(350,50,350,250,250,250);
        ctx.stroke();
    }

    let color='red';
    render(color);

    canvas.addEventListener('mousemove',function(event){
        const {left,top}=canvas.getBoundingClientRect();
        const x=event.clientX-left;
        const y=event.clientY-top;
        let curColor='red';
        if(x>30&&x<470&&y>230&&y<470){
            curColor='black';
        }else{
            curColor='red';
        }
        if(color!==curColor){
            color=curColor;
            // 清除画布
            ctx.clearRect(0,0,canvas.width,canvas.height);
            render(color);
        }
    })

</script>

机器人升级版.gif

avatar
文章
阅读
粉丝