Canvas元素

绘制线条

Canvas 元素作为 HTML5 标准的一部分，允许你通过脚本动态渲染图像

代码

var cvs = document.getElementById('id');
//获取工具集
var cxt = cvs.getContext('2d');
//定位开始点
cxt.moveTo(30,30);
cxt.lineTo(90,30);
//描点
cxt.stroke();

• closePath();闭合点

绘制图形

绘制三角形

var cvs = document.getElementById('id');
//获取工具集
var cxt = cvs.getContext('2d');
//定位开始点
cxt.moveTo(30,30);
cxt.lineTo(90,30);
cxt.lineTo(50,50);
cxt.closePath();
//描点
cxt.stroke();

classPath()

闭合路劲绘制

绘制颜色

颜色设置

cxt.strokeStyle = color

cxt.fillStyle = color

cxt.strokeStyle = red;

像素设置

cxt.lineWidth = num

cxt.lineWidth = 12px;

beginPath()

开启一条新路径

可以单独的绘制不同颜色的线条

绘制不同颜色线条的三角形

	  var cvs = document.getElementById('id');
	  //获取工具集
	  var cxt = cvs.getContext('2d');
	   //设置绘制图形的颜色
      cxt.strokeStyle='red';
      //定位一个起始点
      cxt.moveTo(50,50);
      //绘制第二个点
      cxt.lineTo(150,50)
      //绘制线条
      cxt.stroke()
      //重置当前路径
      cxt.beginPath();
 	  //设置绘制图形的颜色
      cxt.strokeStyle='blue';
      //设置绘制第二条线起始点
      cxt.moveTo(150,50);
      //绘制第二个点
      cxt.lineTo(80,100)
      //绘制线条
      cxt.stroke()
      //重置当前路径
      cxt.beginPath();

      //设置绘制图形的颜色
      cxt.strokeStyle='green';
      //设置绘制第二条线起始点
      cxt.moveTo(80,100);
      //返回原始点
      cxt.lineTo(50,50)
      //绘制线条
      cxt.stroke()

绘制文字

1.设置文字样式

cxt.font = '字体属性'

cxt.font = 'solid 32px sans-serif'

2.字体绘制

//1.填充式
cxt.fillText(text,x,y,maxWidth);
//2.描边式
cxt.strokeText(text,x,y,maxWidth);

文字对齐

//设置文本内容水平对齐方式
context.textAlign='水平方位值' //center|left|right
//设置文本内容垂直对齐方式
context.textBaseline='垂直方位值' //top|middle|bottom

图片另存为

//当前绘制内容存为图片
context.toDataURL(type, encoderOptions);//image/png图片格式,0到1区间图片质量
//使用
var imgUrl = cvs.toDataURL('./IMG',1);

绘制API

• 绘制矩形

  //绘制矩形的路径
  context.rect(x,y,width,height);
  //绘制无填充的矩形
  context.strokeRect(x,y,width,height);
  //绘制填充的矩形
  context.fillRect(x,y,width,height);
  //清空指定矩形内像素
  context.clearRect(x,y,width,height);
  

• 绘制有弧度的圆形

  //在指定位置绘制一个圆形
  context.arc(x,y,r,sAngle,eAngle,clockwise);//圆心，开始度，结束度，总绘制度
  

• 绘制不同大小的图片

  //在画布上绘制固定坐标的图像
  context.drawImage(img,x,y);
  //在画布上绘制不仅固定坐标，且规定图像的宽度和高度图像
  context.drawImage(img,x,y,width,height);
  //在画布上剪切图像，并在画布上绘制被剪切的部分
  context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
  //(参数为，原图片的裁剪点和需要裁剪打宽高，放置画布的坐标点和图片宽高)