【HTML5】Canvas绘图详解-1

 

----->Canvas绘制基础

1，线条绘制

1-1，线条组成的图形和beginPath

     案例：绘制由不同颜色的线条组成的图案

     

---

1-2，多边形的填充和closePath

    案例：绘制封闭具有填充色的图案

1，绘制封闭图案

2，填充图案

context.fillStyle="yellow";//定义填充色
context.fill();//执行填充操作

注意：先填充和先绘制图案的结果是不一样

---

1-3，绘制矩形

context.rect(x,y,width,heigth);//定义矩形
context.fillRect(x,y,width,height);//定义矩形并填充（无边框）
context.strokeRect(x,y,width,height);//定义矩形并绘制（无填充）

2，线条的属性

2-1，线条的帽子：lineCap

//javascript 语法
context.lineCap="butt|round|square";

---

2-2，线条的连接：lineJoin和miterLimit

//javascirpt 语法
context.lineJoin="bevel|round|miter";

 

miterLimit 最大斜接长度。

提示：只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效。

边角的角度越小，斜接长度就会越大。

为了避免斜接长度过长，我们可以使用 miterLimit 属性。

如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示

 

对于斜接长度的定义我所知道的目前有两个版本

W3School：http://www.w3school.com.cn/tags/canvas_miterlimit.asp

斜接长度指的是在两条线交汇处内角和外角之间的距离。

慕课网liuyubobobo：http://www.imooc.com/video/3492

遇到这样的分歧，那就来举例验证吧

  var canvas=document.getElementById("canvas");
    var context=canvas.getContext("2d");
    window.onload=function(){
        canvas.width=800;
        canvas.height=800;
        context.lineWidth=20;        
        
        context.moveTo(100,100);
        context.lineTo(500,120);
        context.lineTo(100,140); 
        context.miterLimit=21;     
        context.stroke();
        
        context.beginPath();
        context.moveTo(100,200);
        context.lineTo(500,220);
        context.lineTo(100,240);
        context.miterLimit=10;     
        context.stroke();
        //辅助线
        context.beginPath();
        context.moveTo(100,100);
        context.lineTo(500,120);
        context.lineTo(100,140); 
        context.lineWidth=1;
        context.strokeStyle="#fff";
        context.stroke();
    };
  

View Code