canvas基本操作
canvas基本操作
timg.jpg
一、canvas简介
Canvas API主要聚焦于2D图形。由<canvas> 标签定义图形，比如图表和其他图像，必须使用脚本来绘制图形。而同样使用<canvas>元素的WebGL API则用于绘制硬件加速的2D和3D图形。
二、canvas和svg的区别
- 首先，canvas是html5提供的新元素<canvas>，而svg存在的历史要比canvas久远，已经有十几年了。svg并不是html5独有的，最初svg是用xml技术描述二维图形的语言。在h5中看似canvas与svg很像，看是，他们有着巨大的差别。
从功能上来看，canvas是一个画布，绘制的图形为标量图。因此，在canvas中可以引入jpg或png这类格式的图片。由于canvas技术的渐渐成熟，在实际开发中，很多大型网络游戏都用了canvas画布。另外，还可以用来做统计图表、柱状图、或饼状图等。
而svg所绘制的图形为矢量图，不能引入普通的图片，所以在用法上便受到了限制。因为矢量图放大不会失真的效果，在项目中我们会用来做一些动态的图标，而百度地图就是用svg技术实现的。
从技术层面来讲，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;
}
