canvas基本操作

timg.jpg

一、canvas简介

Canvas API主要聚焦于2D图形。由<canvas> 标签定义图形，比如图表和其他图像，必须使用脚本来绘制图形。而同样使用<canvas>元素的WebGL API则用于绘制硬件加速的2D和3D图形。

二、canvas和svg的区别

1. 首先，canvas是html5提供的新元素<canvas>，而svg存在的历史要比canvas久远，已经有十几年了。svg并不是html5独有的，最初svg是用xml技术描述二维图形的语言。在h5中看似canvas与svg很像，看是，他们有着巨大的差别。

2. 从功能上来看，canvas是一个画布，绘制的图形为标量图。因此，在canvas中可以引入jpg或png这类格式的图片。由于canvas技术的渐渐成熟，在实际开发中，很多大型网络游戏都用了canvas画布。另外，还可以用来做统计图表、柱状图、或饼状图等。

   而svg所绘制的图形为矢量图，不能引入普通的图片，所以在用法上便受到了限制。因为矢量图放大不会失真的效果，在项目中我们会用来做一些动态的图标，而百度地图就是用svg技术实现的。

3. 从技术层面来讲，canvas中绘制图形通常是通过javascript来实现，svg更多的是通过标签来实现，如在svg中绘制正矩形形就要用<rect>，这里我们不能用属性style="width:XXX;height:XXX;"来定义。我再来介绍一个svg的js库：TWO.JS。其中包含two.js和three.js前者用于绘制二维图形，后者用于绘制三维图形。TWO.JS可以支持三种格式，svg（默认）、canvas、和WEBGL。当然也可以在普通div中引入。

三、canvas基本用法

• 创建画布

画布的大小不能在css中设置，可以在js或行内样式(如下：)中设置

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

• 获取画布并创建画笔

canvas元素本身是没有绘制能力的，必须要介绍JavaScript来完成。

并且任何辅助的配置项都应该在绘画之前。

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);

四、线性渐变

createLinearGradient(x,y,x1,y1);

（x，y）为渐变起始点的坐标；（x1, y1）为渐变终点的坐标

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

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);

线性渐变.png

五、绘制路径

• 直角三角形

  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";
  

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

  绘图堆栈中弹出上一个Canvas的状态（此后使用画笔仍然是黑色）

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

六、绘制圆形

arc(圆心横坐标，圆心纵坐标，圆的半径，起始弧度，终止弧度，[旋转方向])

弧度与角度的关系：弧度 = 以知度数 * Math.PI / 180

注：旋转方向默认为false顺时针，逆时针为true

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();

圆形.png

七、绘制扇形

由点连成线，不同于圆形的方式，注意路径的闭合

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();

扇形.png

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

echars是通过canvas的形式进行绘制的，因此如果在css中给canvas设置了宽高就会造成这种问题。eg：

canvas画布的基础大小为300*150，如果在css中设置了如下样式，绘制的图形则会变形

(宽度扩大为原来的2倍，高度扩大为原来的4倍)

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

感觉很简单的话，尝试一下这个案例吧~~~

参照博客