canvas学习day01--创建矩形，边框，清除 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="tutorial" width="300" height="300"> 你的浏览器不支持canvas,请升级你的浏览器</canvas>
    <button onClick="clearCanvas(this)">清除一条线</button>
    <script>
        /* 
        知识点：
        fillRect(x, y, width, height)

        绘制一个填充的矩形

        strokeRect(x, y, width, height)

        绘制一个矩形的边框

        clearRect(x, y, widh, height)

        清除指定的矩形区域，然后这块区域会变的完全透明。

        说明：

        ​ 这3个方法具有相同的参数。

        ​ x, y：指的是矩形的左上角的坐标。(相对于canvas的坐标原点)

        ​ width, height：指的是绘制的矩形的宽和高 */
        var canvas = document.getElementById('tutorial'); 
        console.log(canvas.getContext)
        if (canvas.getContext){ // 方式2  if(!canvas.getContext) return;
            var ctx = canvas.getContext('2d');
            // drawing code here
            ctx.fillStyle = "rgb(200,0,0)"; // 设置填充色---//绘制矩形,填充的默认颜色为黑色
            //绘制矩形
            ctx.fillRect (10, 10, 55, 50);
            
            // 绘制矩形边框
            ctx.strokeStyle = "#68217A"; // 设置颜色
            ctx.strokeRect (65,60,50,60); // 绘制一个矩形的边框

            // clearRect(x, y, widh, height)
            // 清除指定的矩形区域，然后这块区域会变的完全透明

            ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
            ctx.fillRect (30, 30, 55, 50);



            } else {
            // canvas-unsupported code here



        }

        // 清除一条线
        function clearCanvas(data){
            console.log(data)
            // 清除指定的矩形区域，然后这块区域会变的完全透明
            ctx.clearRect (65,55,55,10);
        }
    </script>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</body>
</html>

　　

posted @ 2020-08-12 16:19  小白咚  阅读(1748)  评论(0)    收藏  举报