canvas是html5里面新增的标签，是html5中的画布，用来绘制图形，现在有很多的图表插件底层已经改为由canvas实现，如百度的产品echarts3.0的底层就是基于canvas的，使用canvas可以绘制我们常见到的折线图、柱状图、饼图、k线图等各种图形，为数据可视化提供了新的解决思路，也是html5中最重要的功能。这篇文章我找到了以前学习时候写的几个实例，分别涉及到了lineTo、moveTo、arc、stroke、beginPath、closePath()、rect()、strokeText()等函数，实例效果如下：
实现的代码如下。html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas画布实例</title> </head> <body> <section > <!-- 时间：2017-04-16 描述：宽高写在css里面会变形 --> <canvas id="line" width="200px" height="200px"></canvas> </section> <section > <canvas id="arc" width="200px" height="200px"></canvas> </section> <section > <canvas id="rect" width="200px" height="200px"></canvas> </section> <div></div> <section > <canvas id="text" width="200px" height="200px"></canvas> </section> <section > <canvas id="img" width="200px" height="200px"></canvas> </section> <section > <canvas id="rotate" width="200px" height="200px"></canvas> </section> </body> </html>
javascript代码：
<script>
function drawLine(){
var canvas=document.getElementById("line");
var cxt=canvas.getContext("2d");
cxt.beginPath();
cxt.strokeStyle="#8B0000";//strokeStyle对应stroke fillstyle--fill 默认黑色
cxt.lineWidth=3;//默认1
//cxt.moveTo(x,y):起点x y轴的坐标
cxt.moveTo(20,100);
//cxt.lineTo(x,y):终点x y轴的坐标
cxt.lineTo(120,100);
cxt.stroke();
//cxt.fill();
cxt.closePath();
}
drawLine();
function drawArc(){
var canvas=document.getElementById("arc");
var cxt=canvas.getContext("2d");
cxt.beginPath();
//单位是弧度
//arc(x:Number,y: Number,radius:Number,startAngle:Number,endAngle:Number,anticlockwise:Boolean)
//换算公式:多少弧度=多少角度*Math.PI/180 2pi*r/r弧度=2pi弧度=360度 1度=2pi/360弧度=pi/180弧度
cxt.arc(100,100,50,0*Math.PI/180,90*Math.PI/180,false);
cxt.stroke();
cxt.closePath();
}
drawArc();
function drawRect(){
var canvas=document.getElementById("rect");
var cxt=canvas.getContext("2d");
cxt.beginPath();
//rect(x: Number, y: Number, w: Number, h: Number)
cxt.rect(10,10,100,50);
cxt.stroke();
cxt.closePath();
}
drawRect();
function drawText(){
var canvas=document.getElementById("text");
var cxt=canvas.getContext("2d");
cxt.beginPath();
//rect(x: Number, y: Number, w: Number, h: Number)
cxt.font="25px 宋体";
//strokeText(text: String, x: Number, y: Number, maxWidth: Number): none
cxt.strokeStyle="#8B0000";
cxt.strokeText("canvas写的文字",20,80);
cxt.closePath();
}
drawText();
//欧朋浏览器支持
function drawImg(){
var canvas=document.getElementById("img");
var cxt=canvas.getContext("2d");
cxt.beginPath();
var img=new Image();
img.src="duang.png";
//drawImage(img,0,0,200,200):img,x,y,width,height
cxt.drawImage(img,0,0,200,200);
cxt.closePath();
}
drawImg();
function drawRotate(){
var canvas=document.getElementById("rotate");
var cxt=canvas.getContext("2d");
cxt.beginPath();
cxt.font="25px 宋体";
cxt.strokeStyle="#8B0000";
cxt.strokeText("canvas写的文字",20,80);
cxt.closePath();
cxt.save();//旋转操作在save和restore之间来完成
cxt.translate(20,80);//设定以那个点为基准点进行旋转
cxt.rotate(30*Math.PI/180);//设定旋转度数
cxt.strokeText("canvas写的文字",0,0);//这里的x,y是基于translate设置的基准点来进行计算的
cxt.restore();
}
drawRotate();
</script>
css代码：
<style>
section{
border: 1px solid darkred;
width: 200px;
height: 200px;
display: inline-block;
}
/*
canvas{
width: 200px;
height: 200px;
}*/
</style>
总结与说明：
1.上边实现应该注意的点我已经写在了代码的注释里，不清楚的可以看代码的注释
2.另外一点需要注意的是，canvas的宽高不能再css里面设置，需要使用canvas自己的width和height属性来设置，如<canvas id="arc" width="200px" height="200px"></canvas>，不然会引起canvas绘制出来的图像变形。