canvas系列教程01——直线、三角形、多边形、矩形、调色板

绘图步骤

  1. html中添加 canvas 标签,通常需指定 id width(默认 300px) height(默认 150px)

     <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;">canvas>
    

    宽度和高度一定要在HTML中定义,不能在CSS中定义(无法通过 canvas对象获取正确的宽度和高度)

  2. 获取canvas对象

    var cnv = document.getElementById("canvas");
    

    可以通过定义了一个获取DOM对象元素的函数$$(id),减少了重复代码量

    function $$(id){
         return document.getElementById(id);
    }
    var cnv = $$("canvas");
    
  3. 获取上下文环境对象context

    var cxt = cnv.getContext("2d");
    
  4. 开始绘制

    cxt.moveTo(50, 100);
    cxt.lineTo(150, 50);
    cxt.stroke();
    

直线

方法 说明
moveTo(x1, y1) 将画笔移到目标位置(x1, y1)
lineTo(x2, y2) 描述画笔的移动轨迹:从画笔的当前位置,画直线直到终点位置(x2, y2)
stroke() 画线
// 起点
cxt.moveTo(x1, y1);
// 终点
cxt.lineTo(x2, y2);
// 连线
cxt.stroke();

多条直线

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

在这里插入图片描述

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

在这里插入图片描述

三角形

 cxt.moveTo(50, 100);
 cxt.lineTo(150, 50);
 cxt.lineTo(150, 100);
 cxt.lineTo(50, 100);
 cxt.stroke();

在这里插入图片描述

多边形

和三角形一样,需用moveTo,lineTo,stroke进行绘制,如箭头:

箭头

            cxt.moveTo(40, 60);
            cxt.lineTo(100, 60);
            cxt.lineTo(100, 30);
            cxt.lineTo(150, 75);
            cxt.lineTo(100, 120);
            cxt.lineTo(100, 90);
            cxt.lineTo(40, 90);
            cxt.lineTo(40, 60);
            cxt.stroke();

canvas系列教程01——直线、三角形、多边形、矩形、调色板_第1张图片

正多边形

根据正多边形的特点,可以封装一个专门绘制正多边形的函数

        /*
         * n:表示n边形
         * dx、dy:表示n边形中心坐标
         * size:表示n边形的大小
         */
        function createPolygon(cxt, n, dx, dy, size) {
            cxt.beginPath();
            var degree = (2 * Math.PI )/ n;
            for (var i = 0; i < n; i++) {
                 var x = Math.cos(i * degree);
                 var y = Math.sin(i * degree);
                 cxt.lineTo(x * size + dx, y * size + dy);
            }
            cxt.closePath();
        }
  • cxt.beginPath() 用于开始一条新路径
  • cxt.closePath() 用于关闭路径。

使用效果如下:

            createPolygon(cxt, 3, 100, 75, 50);
            cxt.fillStyle = "HotPink";
            cxt.fill();

canvas系列教程01——直线、三角形、多边形、矩形、调色板_第2张图片

createPolygon(cxt, 4, 100, 75, 50);

canvas系列教程01——直线、三角形、多边形、矩形、调色板_第3张图片

createPolygon(cxt, 5, 100, 75, 50);

canvas系列教程01——直线、三角形、多边形、矩形、调色板_第4张图片

createPolygon(cxt, 6, 100, 75, 50);

canvas系列教程01——直线、三角形、多边形、矩形、调色板_第5张图片

五角星

cxt.beginPath();
for (var i = 0; i < 5; i++) {
cxt.lineTo(Math.cos((18 + i * 72) * Math.PI / 180) * 50 + 100,
          -Math.sin((18 + i * 72) * Math.PI / 180) * 50 + 100);
cxt.lineTo(Math.cos((54 + i * 72) * Math.PI / 180) * 25 + 100,
          -Math.sin((54 + i * 72) * Math.PI / 180) * 25 + 100);
}
cxt.closePath();
cxt.stroke();

canvas系列教程01——直线、三角形、多边形、矩形、调色板_第6张图片

矩形

描边矩形

cxt.strokeStyle = 属性值;
cxt.strokeRect(x,y,width,height);

此处strokeStyle必须在strokeRect之前(绘图前,需先选画笔)

strokeStyle 用于指定连线样式,属性值可以为颜色值、渐变色和图案

cxt.strokeStyle = "#FF0000";            //十六进制颜色值
cxt.strokeStyle = "red";                //颜色关键字
cxt.strokeStyle = "rgb(255,0,0)";       //rgb颜色值
cxt.strokeStyle = "rgba(255,0,0,0.8)";  //rgba颜色值

strokeRect方法的原理图如下,(x,y)为矩形的左上角坐标,width为矩形宽度、height为矩形高度
canvas系列教程01——直线、三角形、多边形、矩形、调色板_第7张图片

 cxt.strokeStyle = "red";
 cxt.strokeRect(50, 50, 80, 80);

cxt.strokeStyle="red";
cxt.rect(50,50,80,80);
cxt.stroke();

rect() 调用之后,并不会把矩形绘制出来。还需调用stroke()或者fill()方法,才会把矩形绘制出来。
canvas系列教程01——直线、三角形、多边形、矩形、调色板_第8张图片

填充矩形

cxt.fillStyle=属性值;
cxt.fillRect(x, y, width, height);

此处fillStyle必须在fillRect之前(绘图前,需先选画笔)

fillStyle 用于指定填充样式,属性值可以为颜色值、渐变色和图案
fillRect 方法的原理图如下,(x,y)为矩形的左上角坐标,width为矩形宽度、height为矩形高度
canvas系列教程01——直线、三角形、多边形、矩形、调色板_第9张图片

cxt.fillStyle = "HotPink";
cxt.fillRect(50, 50, 80, 80);

cxt.fillStyle="HotPink";
cxt.rect(50,50,80,80);
cxt.fill();

canvas系列教程01——直线、三角形、多边形、矩形、调色板_第10张图片

通过多直线绘制(不推荐)

 cxt.moveTo(50, 100);
 cxt.lineTo(50,50); 
 cxt.lineTo(150, 50);
 cxt.lineTo(150, 100);
 cxt.lineTo(50, 100);
 cxt.stroke();

在这里插入图片描述

清空矩形

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

即镂空矩形的效果

cxt.fillStyle = "HotPink";
cxt.fillRect(50, 50, 80, 80);
cxt.clearRect(60, 60, 50, 50);

canvas系列教程01——直线、三角形、多边形、矩形、调色板_第11张图片

清空整个canvas

cxt.clearRect(0, 0, cnv.width, cnv.height);

调色板

方格调色板

            for (var i = 0; i < 6; i++) {
                 for (var j = 0; j < 6; j++) {
                     cxt.fillStyle = "rgb(" + Math.floor(255 - 42.5 * i) + "," + Math.floor(255 - 42.5 * j) + ",0)";
                      cxt.fillRect(j * 25, i * 25, 25, 25);
                 }
            }

canvas系列教程01——直线、三角形、多边形、矩形、调色板_第12张图片

渐变调色板

 var r = 255, g = 0, b = 0;
 for (i = 0; i < 150; i++) {
      if (i < 25) {
            g += 10;
      } else if (i > 25 && i < 50) {
            r -= 10;
      } else if (i > 50 && i < 75) {
            g -= 10;
            b += 10;
      } else if (i >= 75 && i < 100) {
            r += 10;
      } else {
            b -= 10;
      }
      cxt.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
      cxt.fillRect(3 * i, 0, 3, cnv.height);
}

canvas系列教程01——直线、三角形、多边形、矩形、调色板_第13张图片

你可能感兴趣的:(#,HTML,#,已归档链接,canvas)