Canvas基础

画三角形

画一个颜色为red，线条为6的正三角形

<canvas width="800" height="600"></canvas>
复制代码

width和height不能经过css来设置，不能有单位

//获取画布
  var c=document.querySelector("canvas");
  //获取绘制的对象
  var ctx=c.getContext("2d");
  //设置颜色和width
  ctx.strokeStyle = "red";
  ctx.lineWidth = 6;  // 不须要带单位
  //开始的位置(横纵坐标)
  ctx.moveTo(100,100);
  ctx.lineTo(50,200);
  ctx.lineTo(150,200);
  ctx.lineTo(100,100); // 闭合直接lineTo固然能够
  // ctx.closePath();//也能够采用clothPath闭合路径,用于画图最后一步的合并
  //绘制
  ctx.stroke();
复制代码

此时正三角形就画好了，还能够设置链接处的样式

• 线链接方式 lineJoin: round | bevel | miter (默认)
• 线帽（线两端的结束方式）lineCap: butt(默认值) | round | square

从新画另外线条的时候须要注意一下

//再画一条线
 //开始的位置(横纵坐标)
 ctx.moveTo(100, 200);
 //结束的位置
 ctx.lineTo(400, 200);
 //设置线的颜色
 ctx.strokeStyle = "green";
 //设置线的宽度
 ctx.lineWidth = 10;
 //绘制
 ctx.stroke();
复制代码

一、此时两次stroke()的绘制会致使第一次的stroke的绘制带有阴影，那是由于第二次至关于将第一次又进行了临摹
二、也能够在每一个画图后使用beginPath()重置路径的方法

线性渐变

• var grd=ctx.createLinearGradient(x0,y0,x1,y1);

var c=document.querySelector("canvas");
 var ctx=c.getContext("2d");
 //建立渐变的方案
 //起始位置的横纵坐标,结束位置的横纵坐标
 var lgd=ctx.createLinearGradient(100,100,500,100);
 //添加渐变的颜色
 // addColorStop(offse,color);
 // 中渐变的开始位置和结束位置介于0-1之间，0表明开始，1表明结束。中间能够设置任何小数
 lgd.addColorStop(0,"red");
 lgd.addColorStop(0.2,"green");
 lgd.addColorStop(0.5,"blue");
 lgd.addColorStop(1,"yellow");
 //把渐变的方案给strokeStyle
 ctx.strokeStyle=lgd;

 ctx.moveTo(100,100);
 ctx.lineTo(500,100);
 ctx.lineWidth=20;
 ctx.stroke();
复制代码

径向渐变

• ctx.createRadialGradient(x0, y0, r0, x1, y1, r1)

//开始的横纵坐标,半径,结束的横纵坐标,半径
  var rgd=ctx.createRadialGradient(200,150,50,200,150,100);
  //添加渐变的颜色
  rgd.addColorStop(0,"red");
  rgd.addColorStop(0.5,"green");
  rgd.addColorStop(1,"blue");
  ctx.fillRect(0,0,200,150);
复制代码

非零环绕

• 以射线为半径顺时针旋转，相交的边同向记为+1，反方向记为-1，若是相加的区域等于0，则不填充。
• 非零区域填充

//逆时针绘制外面的矩形
  ctx.moveTo(100,100);
  ctx.lineTo(100,300);
  ctx.lineTo(300,300);
  ctx.lineTo(300,100);
  ctx.closePath();
  //顺时针绘制里面的矩形
  ctx.moveTo(150,150);
  ctx.lineTo(250,150);
  ctx.lineTo(250,250);
  ctx.lineTo(150,250);
  ctx.closePath();

  ctx.stroke();
  //中间的区域被填充颜色
  ctx.fillStyle="red";
  ctx.fill();
复制代码

绘制虚线

• ctx.setLineDash(segments);
• segments
  • 一个Array数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字。 若是数组元素的数量是奇数， 数组的元素会被复制并重复。例如， [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。

ctx.moveTo(100,50);
  ctx.lineTo(400,50);
  //虚线:参数是一个数组:线的长度是20,空白的地方也是20
  //ctx.setLineDash([20,20]);
  ctx.setLineDash([10,20,10]);
  ctx.stroke();
复制代码

绘制动画矩形

//  绘制一个矩形
  //  ctx.fillStyle="green";
  //  //绘制矩形
  //  ctx.fillRect(100,100,100,200);
  //  ctx.stroke();
  
  // 将矩形动起来的思路就是使用setInterval
    var x = 0;//开始的坐标
  //每次移动的步数
  var step = 5;
  //标记(设置矩形向右移动后再回来)
  var i = 1;
  setInterval(function () {
    //清理画布 必需要先清理，不然就是重绘
    ctx.clearRect(0, 0, c.width, c.height);

    ctx.fillStyle = "green";//颜色
    ctx.fillRect(x, 100, 100, 200);//横纵坐标,宽和高
    ctx.stroke();

    x += step * i;//控制横坐标的
    if (x > c.width - 100) {
      i = -1;//标记设置为-1
    } else if (x <= 0) {
      i = 1;//i的值,不是x
    }
  }, 10);
复制代码

绘制文本

• 绘制填充文本 content.fillText(文本的内容,x,y)
• 绘制镂空文本 content.strokeText()
• 设置文字大小： content.font="20px 微软雅黑"
  备注： 该属性设置文字大小，必须按照cssfont属性的方式设置
• 文字水平对齐方式【文字在圆心点位置的对齐方式】 content.textalign="left | right | center"
• 文字垂直对齐方式 content.textBaseline="top | middle | bottom | alphabetic(默认)"
• 文字阴影效果
  • ctx.shadowColor="red"; 设置文字阴影的颜色
  • ctx.ShadowOffsetX=值; 设置文字阴影的水平偏移量
  • ctx.shadowOffsetY=值; 设置文字阴影的垂直偏移量
  • ctx.shadowBlur=值; 设置文字阴影的模糊度

绘制十字线做为参考
ctx.moveTo(300, 0);
ctx.lineTo(300, 400);
ctx.stroke();

ctx.beginPath();

ctx.moveTo(0, 200);
ctx.lineTo(600,200);
ctx.stroke();

// 开始绘制文本
//绘制文本 :是像素 和字体（）
ctx.font="50px 宋体";
//设置文本的对齐方式
ctx.textAlign="center";//left|right|center
//设置文本的上下对齐方式
ctx.textBaseline="middle";//top|bottom|alphabetic(默认)
//设置阴影的颜色
ctx.shadowColor="red";
//水平方向偏移量
ctx.shadowOffsetX=15;
ctx.shadowOffsetY=5;
//阴影的模糊度
ctx.shadowBlur=5;
//参数1:文字内容，参数2:横坐标,参数3；纵坐标
//镂空的效果
// ctx.strokeText("你好",300,200);
//填充文本
ctx.fillText("你好",300,200);
复制代码

绘制图片

将图片绘制到画布的指定位置

• void ctx.drawImage(image, dx, dy);
• void ctx.drawImage(image, dx, dy, dWidth, dHeight);
• void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

//绘制图片
var img=document.createElement("img");
img.src="image/2.jpg";
//图片和画图发生关系,才能够绘制这个图片
//图片加载
img.onload=function () {
  //将图片绘制到画布的指定位置
  content.drawImage(图片对象,x,y);
  ctx.drawImage(img,0,0);  // 从画布的0，0位置开始绘制 
  
  //将图片绘制到指定区域大小的位置  x,y指的是矩形区域的位置，width和height指的是矩形区域的大小
  content.drawImage(图片对象,x,y,width,height);
  ctx.drawImage(img,100,100,200,100);   // 在规定矩形范围以内画图
 
  //将图片的指定区域绘制到指定矩形区域内
  content.drawImage(图片对象,sx,sy,swidth,sheight,dx,dy,dwidth,dheight);
  sx,sy 指的是要从图片哪块区域开始绘制，swidth，sheight 是值 截取图片区域的大小
  dx,dy 是指矩形区域的位置，dwidth,dheight是值矩形区域的大小
  ctx.drawImage(img,180,50,350,170,100,100,350,170);  //图片对象,图片选择的横纵坐标,图片的宽和高,画图的横纵坐标,图片显示的宽和高
};
复制代码

• 解决图片绘制到某一个区域的按原比例缩放绘制：
  绘制宽：绘制高==原始宽：原始高

// 不失真的公式
  var w=img.width
  var h=img.height
  var drawH=200*h/w
  ctx.drarImage(img,100,50,200,drawH)
复制代码

绘制弧度

• ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)
• x 圆弧中心（圆心）的 x 轴坐标。 y 圆弧中心（圆心）的 y 轴坐标。 radius 圆弧的半径。 startAngle 圆弧的起始点， x轴方向开始计算，单位以弧度表示。 endAngle 圆弧的终点， 单位以弧度表示。 anticlockwise 可选 可选的Boolean值 ，若是为 true，逆时针绘制圆弧，反之，顺时针绘制。

//绘制弧度:圆心坐标,半径,开始的弧度,结束的弧度,默认顺时针(false)
  ctx.arc(200,150,50,Math.PI/2,2*Math.PI,false);
  ctx.stroke();
复制代码

• 0度角在哪？
  以圆心为中心向右为0角 顺时针为正，逆时针为负
• 角度 和 弧度的关系： 角度:弧度= 180:pi
• 特殊值
  • 0度 = 0弧度
  • 30度 = π/6 (180度的六分之一)
  • 45度 = π/4
  • 60度 = π/3
  • 90度 = π/2
  • 180度 = π
  • 360度 = 2π
• 绘制圆上任意点：
  • x=ox+r*cos( 弧度 )
  • y=oy+r*sin( 弧度 )
  • ox: 圆心的横坐标
  • oy: 圆心的纵坐标
  • r： 圆的半径

旋转

//设置画布原点平移 经过该方法能够将原点的位置进行从新设置。
  ctx.translate(100, 100);
  
  //旋转的弧度
  ctx.rotate( Math.PI/2 );//90度
复制代码

• 注意

  • translate(x,y) 中不能设置一个值

  • 与moveTo(x,y) 的区别：

    moveTo(x,y) 指的是将画笔的落笔点的位置改变，而坐标系中的原点位置并无发生改变

    translate(x,y) 是将坐标系中的原点位置发生改变

缩放

ctx.scale(2, 0.5);//参数1:相对于原来的横坐标的缩放值,参数2:相对于原来的纵坐标的缩放值
复制代码