二维CANVAS画板基本语法（线与基本图形）

是什么：

Canvas是h5中的一个新标签，是用来绘制图形的画布。
绘制的过程在JS中完成。

用途：

• 数据的可视化（图表图形）；
• 动画与游戏；
• 图标图形等。
  
  

基本过程：

1. 在HTML中创建canvas标签并在行内指定这个画布的宽高（及id）
2. 在JS中var找到画布
3. 创建画图工具 var context =canvas.getContext(“2d”);
4. 移动坐标 context.moveTo(x,y);
5. 画图（画到草稿纸商）context.lineTo(x,y);
6. 印制到body上（描边或填充）
7. 新纸 context.beginPath();
   
   

画图和印制动画语句：

画线

• 绘制直线 context.lineTo(x,y);
• 设置线条宽度context.lineWidth=n;
• 设置线条末端样式 context.lineCap = “round/ butt/ square”;
  round：两端圆头
  butt方头：默认的，整体长度包含接头)
  square方头：每根线另加接头
• 直接闭合路径（前提是可闭合）context.closePath();

画矩形

• 绘制矩形context.rect(x, y, w, h);
• 自动建纸、绘矩形、描边、换纸（后面需要加纸） context.strokeRect(x, y, w, h);
• 自动建纸、绘矩形、填充、扔纸（后面需要加纸） context.fillRect(x, y, w, h);
  
  

应用案例：绘制柱状图

呈现：

柱状图的实现.png

<script>
    var canvas = document.getElementById("canvas");   //画板
     var context = canvas.getContext("2d");   // 画笔
    //画坐标轴
     context.moveTo(30,30);
     context.lineTo(30,canvas.height-30);
     context.lineTo(canvas.width-30,canvas.height-30);
     context.stroke();
    //坐标系数据
    var jobArr = [6000, 4800, 7200, 6700, 8300, 5100];
    //柱形颜色
    var colorArr =["red","orange","yellow","yellowgreen","green","skyblue"];
    var rectGap = 30;   //柱间隔
    var rectWidth = (canvas.width -60 - 30*(jobArr.length+1))/jobArr.length;   //柱宽
    var stepY = (canvas.height-60)/10000;   //单位高度
    //循环：绘制柱状图
    for(var i =0; i< jobArr.length; i++){
        var x = rectGap*(i+1)+rectWidth*i+30 ;   //柱x坐标
        var h = jobArr[i]*stepY;    //柱高度
        var y = canvas.height-30-h-1;   //柱y坐标
        context.beginPath();        //取新纸
        context.rect(x, y, rectWidth, h);    //草稿纸画矩形
        context.fillStyle = colorArr[i];    //设置填充色
        context.fill();   //填充印制
    }
</script>

画圆

画圆context.arc( x, y, radius,startR,endR, anticlockwise);

• x,y圆心坐标；r半径；开始和结束弧度；是否逆时针（默认false）
• 弧度：起始弧度0时，起点在3点钟方向；结束弧度2*Math.PI为一周；
• 角度转弧度： var r= angle/180 * Math.PI;

阴影

• 设置阴影，需要一组数值，且阴影只能设置1个
  context.shadowBlur=n;
  context.shadowOffsetX=n;
  context.shadowOffsetY=n;
  context.shadowColor=”#color”;

印制（描边）

• 描边 context.stroke();
• 设置描边颜色 context.strokeStyle=’#color/gradient’;

印制（填充）

• 填充context.fill();
• 设置填充颜色context.fillStyle=’#color’;
  
  

应用案例：绘制笑脸，圆形和弓形的应用

圆形与弓形的实现.jpg

<script> 
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
    //画圆
    context.arc(200,200,150,0,2*Math.PI);
    context.fillStyle="#ff7900";
    //填充
    context.fill();
    //换纸
    context.beginPath();
    //左右眼睛：两个Y轴相同的圆
    context.arc(130, 150, 30, 0, 2*Math.PI);
    context.arc(270, 150, 30, 0, 2*Math.PI);
    context.fillStyle="#fff";
    context.fill();
    //换纸
    context.beginPath();
    //画嘴：弓形，注意从3点钟方向开始计算弧度，起点和终点对称
    context.arc(200,200,100,0.2*Math.PI,0.8*Math.PI);
    context.closePath();
    context.fill();
</script>

填充镂空图形（空心图形）

步骤：

1. 在草稿纸中画出需镂空的内外路径，内径和外径的顺逆时针方向相反；
2. 利用“非零填充”原则来填充。

非零填充原则：

• 不同图形路径将画面分割为若干region;
• 由region向外画出射线与路径相交，顺时针计值1，逆时针计值-1；
• 如总和为0则不填充；总和不为0 则该region填充。

线性渐变

1. 创建渐变对象（设置起点和方向）
   var gradient = context.creatLinearGradient(x1, y1, x2, y2);
2. 添加渐变颜色
   gradient.addColorStop(0, “#color”);
   gradient.addColorStop(0.n, “#color”);
   gradient.addColorStop(1, “#color”);
3. 把渐变对象设置为填充色
   context.fillStyle = gradient;
4. 草稿纸上画出需要填充的图形路径
   context.rect( x1, y1, w, h);
5. 填充图形
   Context.fill();
   
   

径向渐变

1. 定义需要填充渐变的两个路径的数值的对象
   var c1 = { x:x1, y:y1, r:r1 };
   var c2 = { x:x2, y:y2, r:r2 };
2. 创建渐变对象（设置方向数值）
   var gradient = context.creatRadiaGradient(c1.x, c1.y, c1.r, c2.x, c2.y, c2.r);
3. 添加渐变颜色
   gradient.addColorStop(0, “#color”);
   gradient.addColorStop(0.n, “#color”);
   gradient.addColorStop(1, “#color”);
4. 把渐变对象设置为填充色
   context.fillStyle = gradient;
5. 草稿纸上画出需要填充的两个图形路径（如有镂空，注意方向）
   context.arc(x1, y1, r1, 2Math.PI);
   context.arc(x2, y2, r2, 2Math.PI);
6. 填充路径 context.fill();

案例：渐变游泳圈

呈现：

渐变填充圆环.jpg

<script>
    var canvas = document.getElementById("canvas");
    // 画笔
     var context = canvas.getContext("2d");
    //同心圆
    context.arc(200, 200, 120, 0, 2*Math.PI, true);
    context.arc(200, 200, 200, 0, 2*Math.PI);
    //渐变色
    var radialGradient = context.createRadialGradient(200,200,120,200,200,200);
    radialGradient.addColorStop(0,"#420114");
    radialGradient.addColorStop(0.3,"#BF0029");
    radialGradient.addColorStop(0.5,"#E90020");
    radialGradient.addColorStop(0.8,"#52010C");
    radialGradient.addColorStop(1,"#2E0007");
    //填充
    context.fillStyle = radialGradient;
    // context.fiiStyle = "pink";
    context.fill();
    */
//设置线条样式
    /*
    context.moveTo(30,30);
    context.lineWidth = 50;
    context.lineCap = "square";
    context.lineTo(30,230);
    // context.lineTo(230,230);
    context.stroke();
    */
</script>

2018.1.14