1.什么是canvas?
可以绘制图形的标签。一般用javascript来绘制。
2.创建一个画布
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<canvas id="mycanvas" width="100" height="100"></canvas> //创建画布用canvas标签
</body>
</html>
3.在画布上绘图。
<script type="text/javascript">
//用javascript来绘制图像
//获取到canvas元素
var can=document.getElementById("mycanvas");
//创建html5的内置对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
var draw=can.getContext("2d");
//fillStyle();可以是css的颜色，渐变，图案
draw.fillStyle="red";
//fillRect(x,y,width,height) 定义填充方式
draw.fillRect(0,0,125,12);
</script>
4.canvas-路径
var can=document.getElementById("mycanvas");
var draw=can.getContext("2d");
// 开始一个路径
draw.beginPath();
// 设置线的粗细
draw.lineWidth="5";
//设置线的颜色
draw.strokeStyle="green";
// 线的起点
draw.moveTo(0,75);
//线的终点
draw.lineTo(250,75);
// 开始绘制路径
draw.stroke();
//开始另一个路径
draw.beginPath();
// 设置线的粗细
draw.lineWidth="5";
draw.strokeStyle="purple";
draw.moveTo(25,05);
draw.lineTo(35,25);
draw.stroke();
效果：
// 其他路径的绘制
arc(x,y,r,start,stop); //画圆
5.canvas-文本
1 // 3绘制文本
2 var can=document.getElementById("mycanvas");
3 var draw=can.getContext("2d");
4 // 设置字体的大小
5 draw.font="30px Arial";
6 //绘制出文字，确定文字的位置
7 draw.fillText("Hello World ",10,25);
8 //绘制空心文字
9 draw.strokeText("Hello",10,25);
6.canvas-渐变
var can=document.getElementById("mycanvas");
var draw=can.getContext("2d");
// 创建渐变
// 先创建一个线条渐变
var grd=draw.createLinearGradient(0,0,200,0);
// 设置渐变的停止位置,以及颜色
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
//绘制渐变图形
draw.fillStyle=grd;
draw.fillRect(10,10,120,80);
//圆渐变
ctx.fillRect(10,10,150,80);