canvas学习--直线图形

笨笨狗吞噬者
366 阅读2分钟

坐标系

首先，我们需要了解一下坐标系的使用。正常数学坐标系的y轴正方向向上，而canvas的使用坐标系是W3C坐标系，y轴正方向向下。

image.png

绘制直线

在canvas中，通常使用moveTo()和lineTo()来画一条或者多条直线。预备代码如下：

<!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" width = "300" height = "300" style = "border: 1px dashed gray;"></canvas>
</body>

<script>
    window.onload = function() {
        //写逻辑
    }
</script>
</html>

效果图如下：

image.png

一条直线

语法：

  1. cxt.moveTo(x1,y1)
  2. cxt.lineTo(x2,y2)
  3. cxt.stroke()

(x1,y1)表示直线“起点”的坐标。moveTo的含义是“从（x1,,y1）处开始绘图”

(x2,y2)表示直线“终点”的坐标。lineTo的含义是“到（x2,,y2）处结束绘图”

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

cxt.moveTo(100,100);
cxt.lineTo(180,180);
cxt.stroke();

效果图如下：

image.png

多条直线

语法：

  1. cxt.moveTo(x1,y1)
  2. cxt.lineTo(x2,y2)
  3. cxt.lineTo(x3,y3)
  4. ......
  5. cxt.stroke()
let canvas = document.getElementById('canvas');
let cxt = canvas.getContext('2d');

cxt.moveTo(100,100);
cxt.lineTo(100,140);
cxt.lineTo(130,100);
cxt.lineTo(100,100);
cxt.stroke();

效果图如下：

image.png

矩形

绘制矩形

“描边”矩形

在canvas中，可以使用strokeStyle属性和strokeRect()方法来画一个“描边”矩形

语法：

  1. cxt.strokeStyle = 属性值； （包括颜色值、渐变色、图案三种）
  2. cxt.strokeRect(x,y,width,height)

ps: strokeStyle属性必须在strokeRect()方法之前定义，否则无效

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

cxt.strokeStyle = 'skyblue';
cxt.strokeRect(100,100,100,150);

效果图如下：

image.png

“填充”矩形

在canvas中，可以使用fillStyle属性和fillRect()方法来画一个“填充”矩形

语法：

  1. cxt.fillStyle = 属性值； （包括颜色值、渐变色、图案三种）
  2. cxt.fillRect(x,y,width,height)

ps: fillStyle属性必须在fillRect()方法之前定义，否则无效

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

cxt.fillStyle = 'skyblue';
cxt.fillRect(100,100,100,150);

效果图如下：

image.png

rect()方法

语法：

  1. cxt.rect(x,y,width,height)

rect()方法和前两个方法参数相同，不同在于实现效果方面

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

cxt.strokeStyle = "green";
cxt.rect(100,100,100,150);
cxt.stroke();

cxt.fillStyle = 'skyblue';
cxt.rect(100,100,100,150);
cxt.fill();

效果图如下：

image.png

清空矩形

在canvas中，我们使用clearRect()来清空“指定矩形区域”

语法：

  1. cxt.clearRect(x,y,width,height)

x和y分别表示清空矩形区域最左上角的坐标

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

cxt.fillStyle = 'hotpink';
cxt.rect(100,100,150,150);
cxt.fill();

cxt.clearRect(120,120,50,50);

效果图如下：

image.png

如果想要清空整个canvas，可以用cxt.clearRect(0,0,canvas.width,canvas.height)

练习：绘制方格调色板

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

for(let i = 0;i < 6;i++){
   for(let j = 0; j < 6;j++){
        cxt.fillStyle = `rgb(${Math.floor(255 - 42.5*i)},${Math.floor(255 - 42.5*j)},0)`;
        cxt.fillRect(j*40,i*40,40,40);
   }
}

效果图如下：

image.png

封面制作网站 ColorFu
文章内容参考莫振杰 著《HTML5 CANVAS开发详解》，感兴趣的同学可以阅读一下这本书，如有错误，欢迎指正！！

avatar
文章
阅读
粉丝