Canvas—从零开始绘画矩形🍻

Morakes
524 阅读3分钟

绘画手段基础部分

开始前的准备

在Html上添加一个画布,给上宽高

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas——从线段开始学会</title> 
</head>

<body>
    <canvas id="canvas" style="border: 1px solid #aaaaaa; margin: 50px auto;" width="800" height="600">
    你的浏览器居然不支持Canvas.
    </canvas>
</body> 

</html>

运行结果： image.png

学习如何使用画笔

1.移动画笔 moveTo(x, y） 这句代码的意思是 移动画笔至(x, y)这个点（单位是px） 。记住，这里是以 canvas 画布的左上角为笛卡尔坐标系的原点，且y轴的正方向向下，x轴的正方向向右。

2.笔画停点 lineTo(x, y) 这句的意思是从 上一笔的停止点 绘制到(x,y)这里。不过要清楚，这里的moveTo()，lineTo()都只是状态而已，是我准备要画，还没有开始画，就像是大脑已经想象出来要怎么做了，但是手还没有行动。

3.选择画笔 设置一下画笔的颜色和粗细。

context.lineWidth = 5，这句话的意思是设置画笔(线条)的粗细为 5 px。

context.strokeStyle = "pink"，这句话的意思是设置画笔(线条)的颜色为玫红色。

4.确定绘制 确定绘制只有两种方法，fill()和stroke()，前者是指填充，后者是指描边。因为我们只是绘制线条，所以只要描边就可以了。调用代码 context.stroke() 即可。

开始绘画线段

准备工作完毕了，现在我们开始来绘画第一条线段吧

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Canvas——从线段开始学会</title>
</head>
<body>
  <canvas id="canvas" style="border: 1px solid #aaaaaa; margin: 50px auto;" width="800" height="600">
    你的浏览器居然不支持Canvas.
  </canvas>
  <script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");
        context.moveTo(100,100);
        context.lineTo(700,500);
        context.lineWidth = 5;
        context.strokeStyle = "pink";
        context.stroke();
    }
  </script>
</body>
</html>

演示图： image.png

到这里你已经具备基本的绘画手段了，接下来可以尝试进一步的学习了。

绘画多条线段

beginPath() 为了让绘制方法不重复绘制，我们可以在每次绘制之前加上 beginPath()，代表下次绘制的起始之处为 beginPath() 之后的代码。我们在三次绘制之前分别加上context.beginPath()；

<!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 id="canvas" style="border: 1px solid #aaaaaa; margin: 50px auto;" width="800" height="600">
    你的浏览器居然不支持Canvas.
  </canvas>
  <script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");

        context.beginPath();
        context.moveTo(100,100);
        context.lineTo(300,300);
        context.lineTo(100,500);
        context.lineWidth = 5;
        context.strokeStyle = "red";
        context.stroke();

        context.beginPath();
        context.moveTo(300,100);
        context.lineTo(500,300);
        context.lineTo(300,500);
        context.lineWidth = 5;
        context.strokeStyle = "blue";
        context.stroke();

        context.beginPath();
        context.moveTo(500,100);
        context.lineTo(700,300);
        context.lineTo(500,500);
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
    }
</script>
</body>
</html>

演示图：

image.png 有兴趣的小伙伴可以去掉context.beginPath看一看会发生什么~

矩形的绘画

closePath() 绘制最后一笔使图像闭合

接下来我们开始利用上面所学的知识来绘画一个矩形

<!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 id="canvas" style="border: 1px solid #aaaaaa; margin: 50px auto;" width="800" height="600">
    你的浏览器居然不支持Canvas.
  </canvas>
  <script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");

        context.beginPath();
        context.moveTo(150,50);
        context.lineTo(650,50);
        context.lineTo(650,550);
        context.lineTo(150,550);
        context.closePath();//绘制最后一笔使图像闭合
        
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();

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

演示图：

image.png

给矩形上色

图形描边 fillStyle 用fillStyle属性选择要填充的颜色，然后使用 fill 对图形进行颜色填充

<!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 id="canvas" style="border: 1px solid #aaaaaa; margin: 50px auto;" width="800" height="600">
    你的浏览器居然不支持Canvas.
  </canvas>
  <script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");

        context.beginPath();
        context.moveTo(150,50);
        context.lineTo(650,50);
        context.lineTo(650,550);
        context.lineTo(150,550);
        context.closePath();//绘制最后一笔使图像闭合
        
        context.fillStyle = "lightblue"; 
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.fill();//颜色填充
        context.stroke();

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

image.png

封装绘制方法

每次画个矩形都要自己去画四条线段的话，显得既简单又麻烦。接下来我们自己封装一个函数，让函数替我们去完成绘画。

<!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 id="canvas" style="border: 1px solid #aaaaaa; margin: 50px auto;" width="800" height="600">
    你的浏览器居然不支持Canvas.
  </canvas>
  <script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext("2d");
        drawRect(context, 150, 50, 500, 500, 'lightblue', 5, 'black')
        drawRect(context, 50, 25, 50, 25, 'pink', 1 , 'black' )
        drawRect(context, 700, 25, 50, 25, 'orange', 1 , 'black' )
    }

    function drawRect(ctx, x, y, width, height, fillColor, borderWidth, borderColor){
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x + width, y);
        ctx.lineTo(x + width, y + height);
        ctx.lineTo(x, y + height);
        ctx.lineTo(x, y);
        ctx.closePath();

        ctx.lineWidth = borderWidth;
        ctx.strokeStyle = borderColor;
        ctx.fillStyle = fillColor;

        ctx.fill();
        ctx.stroke();
    }
  </script>
</body>
</html>

演示图： image.png

使用rect()方法绘制矩形

rect(x,y,width,height) 由于矩形比较常用， Canvas API已经帮我们封装好了相关的方法

<!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 id="canvas" style="border: 1px solid #aaaaaa; margin: 50px auto;" width="800" height="600">
   你的浏览器居然不支持Canvas.
 </canvas>
 <script>
   window.onload = function(){
       var canvas = document.getElementById("canvas");
       canvas.width = 800;
       canvas.height = 600;
       var context = canvas.getContext("2d");
       
       context.rect(150, 50, 500, 500)
       context.lineWidth = 5;
       context.strokeStyle = 'black';
       context.fillStyle = 'lightblue';

       context.fill()
       context.stroke()
   }
 </script>
</body>
</html>

演示图：

image.png

总结

ctx.beginPath() 使绘制方法不重复绘制

ctx.closePath() 绘制最后一笔使图像闭合

ctx.moveTo() 移动画笔至(x, y)这个点（单位是px）

ctx.lineTo() 上一笔的停止点 绘制到(x,y)

ctx.lineWidth() 画笔的边框

ctx.storkeStyle() 设置画笔的颜色

ctx.storke() 填充画笔颜色

ctx.fillStyle() 设置图形颜色

ctx.fill() 填充图形颜色

ctx.rect() 绘画矩形API

avatar
文章
阅读
粉丝