一篇文章读懂canvas

标签: canvas

一.canvas简介

<canvas> 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处理和渲染。

二.基本用法

要使用<canvas>元素,必须设置其width和height属性,指定可以绘图的区域大小,出现开始和结束标签中的内容是后背信息,如果浏览器不支持<canvas>元素,就会显示这些信息

<canvas id = 'drawing' width = '200' height = '200'  > A darwing of something <canvas>

如果不给<canvas>设置widht、height属性时,则默认 width为300、height为150,单位都是px。也可以使用css属性来设置宽高,但是如宽高属性和初始比例不一致,他会出现扭曲。所以,建议永远不要使用css属性来设置<canvas>的宽高。

要在这块画布上绘图,需要取得绘图上下文,需要调用getContext()方法并传入上下文的名字,传入‘2d’

var drawing = document.getElementById('tutorial');
// 确定浏览器支持<canvas>元素
if(drawing.getContext){
   var context = drawing.getContext('2d');
//更到代码
}

三.绘制矩形

矩形是一种可以直接在2D上下文绘制的形状,有关的方法为:fillRect(),strokeRect(),clearRect().

这三个方法都可以接受4个参数:矩形的x坐标,矩形的y坐标,矩形的宽度和矩形的高度

1.fillRect(),方法在画布上绘制矩形,填充的颜色通过fillStyle属性指定

    <canvas width="200" height="200" id="drawing"></canvas>
    <script>
       var drawing = document.getElementById('drawing');
       if(drawing.getContext){
           var context = drawing.getContext('2d');
           context.fillStyle = '#ff0000';
           context.fillRect(10,10,50,50);
           context.fillStyle =' rgba(0,0,255,0.5)';
           context.fillRect(30,30,50,50);
       }
    </script>

2.strokeRect()方法在画布上会描边矩形,描边颜色通过syrokeStyle属性指定

   <canvas width="200" height="200" id="drawing"></canvas>
    <script>
       var drawing = document.getElementById('drawing');
       if(drawing.getContext){
           var context = drawing.getContext('2d');
           context.strokeStyle = '#ff0000';
           context.strokeRect(10,10,50,50);
           context.strokeStyle =' rgba(0,0,255,0.5)';
           context.strokeRect(30,30,50,50);
       }
    </script>

描边线条的宽度由lineWidth属性控制,该属性可以使任意整数,另外,通过lineCap属性可以控制线条末端的形状是平头,圆头还是方头('butt','round','square') , 通过lineJoin属性可以控制线条相交的方式是圆交,斜交还是斜接('round','bevel','miter');

var lineCaps = ["butt", "round", "square"];

for (var i = 0; i < 3; i++){
   ctx.beginPath();
   ctx.moveTo(20 + 30 * i, 30);
   ctx.lineTo(20 + 30 * i, 100);
   ctx.lineWidth = 20;
   ctx.lineCap = lineCaps[i];
   ctx.stroke();
}

ctx.beginPath();
ctx.moveTo(0, 30);
ctx.lineTo(300, 30);

ctx.moveTo(0, 100);
ctx.lineTo(300, 100)

ctx.strokeStyle = "red";
ctx.lineWidth = 1;
ctx.stroke();

function draw(){
    var canvas = document.getElementById('tutorial');
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");

    var lineJoin = ['round', 'bevel', 'miter'];
    ctx.lineWidth = 20;

    for (var i = 0; i < lineJoin.length; i++){
        ctx.lineJoin = lineJoin[i];
        ctx.beginPath();
        ctx.moveTo(50, 50 + i * 50);
        ctx.lineTo(100, 100 + i * 50);
        ctx.lineTo(150, 50 + i * 50);
        ctx.lineTo(200, 100 + i * 50);
        ctx.lineTo(250, 50 + i * 50);
        ctx.stroke();
    }

}
draw();

3.clearRect(x, y, widh, height)

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

    <canvas width="200" height="200" id="drawing"></canvas>
    <script>
       var drawing = document.getElementById('drawing');
       if(drawing.getContext){
           var context = drawing.getContext('2d');
           context.fillStyle = '#ff0000';
           context.fillRect(10,10,50,50);
           context.fillStyle =' rgba(0,0,255,0.5)';
           context.fillRect(30,30,50,50);
           context.clearRect(15, 15, 25, 25);
       }

四、绘制路径(path)

  1. 创建路径起始点
  2. 调用绘制方法去绘制出路径
  3. 把路径封闭
  4. 一旦路径生成,通过描边或填充路径区域来渲染图形。
  1. beginPath()

    新建一条路径,路径一旦创建成功,图形绘制命令被指向到路径上生成路径

  2. moveTo(x, y)

    把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。

  3. closePath()

    闭合路径之后,图形绘制命令又重新指向到上下文中

  4. stroke()

    通过线条来绘制图形轮廓

  5. fill()

    通过填充路径的内容区域生成实心的图形

绘制线段: 

      var drawing = document.getElementById('drawing');
       if(drawing.getContext){
           var context = drawing.getContext('2d');
           context.beginPath();
           context.moveTo(20,20);
           context.lineTo(200,20);
           context.lineWidth = '10';
           context.closePath();
           context.stroke();
        }

绘制三角形

虽然我们只绘制了两条线段,但是closePath会closePath,仍然是一个3角形

      var drawing = document.getElementById('drawing');
       if(drawing.getContext){
           var context = drawing.getContext('2d');
           context.beginPath();
           context.moveTo(20,20);
           context.lineTo(200,20);
           context.lineTo(200,120);
           context.closePath();
           context.stroke();
        }

填充三角形

fill会填充闭合区域。如果path没有闭合,则fill()会自动闭合路径。

       var drawing = document.getElementById('drawing');
       if(drawing.getContext){
           var context = drawing.getContext('2d');
           context.beginPath();
           context.moveTo(20,20);
           context.lineTo(200,20);
           context.lineTo(200,120);
           context.fill();
           context.stroke();
        }

绘制圆

arc(x, y, r, startAngle, endAngle, counterclockwise):

(x, y)为圆心,以r为半径,从 startAngle弧度开始到endAngle弧度结束。anticlosewise是布尔值,true表示逆时针,false表示顺时针。(默认是顺时针)

注意:

  1. 这里的度数都是弧度。
  2. 0弧度是指的x轴正方形
       var drawing = document.getElementById('drawing');
       if(drawing.getContext){
           var context = drawing.getContext('2d');
           context.beginPath();
           context.arc(100,100,50,0,Math.PI,false);
           context.stroke();
        }

绘制一个不带数字的始终表盘

       var drawing = document.getElementById('drawing');
       if(drawing.getContext){
           var context = drawing.getContext('2d');
           context.beginPath();
           context.arc(100,100,99,0,2* Math.PI,false);
           context.moveTo(194,100)
           context.arc(100,100,94,0,2* Math.PI,false);
           context.moveTo(100,100);
           context.lineTo(100,20);
           context.moveTo(100,100);
           context.lineTo(20,100);
           context.stroke();
        }

举几个例子:

      var drawing = document.getElementById('drawing');
       if(drawing.getContext){
           var context = drawing.getContext("2d");
           for (var i = 0; i < 3; i++){
             for (var j = 0; j < 10; j++){
                 context.fillStyle = 'rgb(' + Math.floor(255 - 75 * i) + ',' +
                 Math.floor(255 - 22.5 * j) + ',0)';
                 context.fillRect(j * 50, i * 50, 50, 50);
            }
           }
        }

      var drawing = document.getElementById('drawing');
       if(drawing.getContext){
           var ctx = drawing.getContext("2d");
           for (var i = 0; i < 6; i++){
            for (var j = 0; j < 6; j++){
                ctx.strokeStyle = `rgb(${randomInt(0, 255)},${randomInt(0, 255)},${randomInt(0, 255)})`;
                ctx.strokeRect(j * 50, i * 50, 40, 40);
            }
        }
    function randomInt(from, to){
        return parseInt(Math.random() * (to - from + 1) + from);
    }
    
} 

虚线

用 setLineDash 方法和 lineDashOffset 属性来制定虚线样式. setLineDash 方法接受一个数组,来指定线段与间隙的交替;lineDashOffset属性设置起始偏移量.

function draw(){
    var canvas = document.getElementById('tutorial');
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");

    ctx.setLineDash([20, 5]);  // [实线长度, 间隙长度]
    ctx.lineDashOffset = -0;
    ctx.strokeRect(50, 50, 210, 210);
}
draw();

五.绘制文本

canvas 提供了两种方法来渲染文本:

  1. fillText(text, x, y [, maxWidth])

    在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的.

  2. strokeText(text, x, y [, maxWidth])

    在指定的(x,y)位置绘制文本边框,绘制的最大宽度是可选的.

var ctx;
function draw(){
    var canvas = document.getElementById('tutorial');
    if (!canvas.getContext) return;
    ctx = canvas.getContext("2d");
    ctx.font = "100px sans-serif"
    ctx.fillText("hh", 10, 100);
    ctx.strokeText("hh", 10, 200)
}
draw();

给文本添加样式

  1. font = value

    当前我们用来绘制文本的样式。这个字符串使用和 CSS font属性相同的语法. 默认的字体是 10px sans-serif

  2. textAlign = value

    文本对齐选项. 可选的值包括:startendleftright or center. 默认值是 start

  3. textBaseline = value

    基线对齐选项,可选的值包括:tophangingmiddlealphabeticideographicbottom。默认值是 alphabetic。

  4. direction = value

    文本方向。可能的值包括:ltrrtlinherit。默认值是 inherit。

六、绘制图片

三参数:context.drawImage(image,起点的x坐标,起点的y坐标)

五参数:context.drawImage(image,起点的x坐标,起点的y坐标,目标宽度和目标高度)

九参数:context.drawImage(image,源图像的x坐标,源图像的y坐标,源图像的宽度,源图像的高度,

                                             目标图像的x坐标,目标图像的y坐标,目标图像的宽度,目标图像的高度)

 

原文链接:加载失败,请重新获取