canvas基本操作

一、canvas简介

二、canvas和svg的区别

三、canvas基本用法

• 创建画布

<canvas width="500" height="500" id="canvas"></canvas>

• 获取画布并创建画笔

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

• 设置颜色(默认为黑色 )

//填充实心矩形
ctx.fillStyle="#F00";
//或填充空心矩形
ctx.stokeStyle = "#F00";
//空心矩形可以设置线宽,但要注意基线的位置
ctx.lineWidth = 3;

• 改变透明度

ctx.globalAlpha = .3;

• 设置矩形的坐标与大小(x,y,w,h)

ctx.fillRect(0,0,100,200);
ctx.strokeRect(0,0,10,20);

四、线性渐变

• 获取元素，设置线性渐变

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var obj = ctx.createLinearGradient(0,0,200,150);//(x,y,x1,y1)

• 增加渐变的颜色

obj.addColorStop(0.2,'orange');
obj.addColorStop(.4,'white');
obj.addColorStop(.2,'yellow');
obj.addColorStop(1,'red');

• 绘制形状

ctx.fillStyle = obj;
ctx.fillRect(0,0,200,150);

五、绘制路径

• 直角三角形

  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  

• 开始绘制路径，通过save()函数将目前Canvas的状态推到绘图堆栈中。

  ctx.beginPath();
  ctx.save();
  

• 绘制图形

  ctx.moveTo(10,10);
  ctx.lineTo(100,100);
  ctx.lineTo(10,100);
  ctx.strokeStyle = "#F00";
  

• 闭合路径（默认会将结束点和起始点连接）

  ctx.closePath();
  ctx.stroke();
  ctx.restore();
  

六、绘制圆形

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.lineWidth = 1;
ctx.beginPath();
ctx.arc(100, 100, 90, 0, 2 * Math.PI);
ctx.stroke();

七、绘制扇形

var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(150, 150);
ctx.arc(150, 150, 100, 0, 45 * Math.PI / 180);
ctx.closePath();
ctx.stroke();

• echarts中出现了图形变形的原因是什么？

canvas{
    width:600px;
    height:600px;
}