H5新特性 - canvas的基本使用

canvas的基本使用

其实就是一块画布

canvas标签

canvas标签： 宽高的属性必须设置在标签中， 而不是css样式中(包括行间样式)

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

通过标签获取画布

canvas是标签，画布是canvas的一个属性
绘制之前都需要通过标签获取到画布，再通过画布来调用 绘制的方法
画布：canvas绘制的上下文

	var ig = cc.getContext("2d");

绘制直线的流程

• 开始绘制（落笔）

	ig.beginPath();

• 保存当前样式

	ig.save();

• 设置起点

	ig.moveTo(10,10)

• 设置终点
  终点可以设置多个

	ig.lineTo(100,100)
	ig.lineTo(90,50)
	ig.lineTo(110,40)

• 闭合路径 (抬笔)
  可选，根据需求 最后一个点和起点相连接

	ig.closePath();

• 根据设置的点，来连接
  设置连接线的样式

	ig.lineWidth = 8;//设置线宽
	ig.strokeStyle = "#F25807";// 设置连接线的颜色
	ig.stroke();

• 加载保存过的样式

 	ig.restore();

画第二笔

	ig.beginPath()
	ig.moveTo(150,100);
	ig.lineTo(250,100);
	ig.lineTo(250,200);
	ig.lineTo(150,200);
	ig.lineWidth = 5;//设置线宽
	ig.lineJoin = "round"; // 设置两条线交接点的样式
	ig.strokeStyle = "#FF00B7";
			
	ig.closePath();
    ig.stroke();// 抬笔
    

空心的矩形

	ig.strokeRect(300,150,100,100);

实心矩形

	ig.fillStyle = "blue";
	ig.fillRect(300,30,100,100);

清除矩形

	ig.clearRect(325,55,50,50);

空心字

	ig.font = "50px 楷体";
	ig.strokeStyle = "orange";
	ig.strokeText("小小涛",310,200);
	

实心字

	ig.fillText("大大涛",10,300);

渐变

    var cc = document.getElementById("cc");
	var ig = cc.getContext("2d");
	var col = ig.createLinearGradient(10,10,170,10);
	col.addColorStop(0,"pink");
	col.addColorStop(1,"purple");

	ig.fillStyle = col;
	ig.fillRect(10,10,200,20);
	

画圆

arc: 画圆
参数：

1. 在canvas中 x轴上的位置
2. 。。。。。 y轴上的位置
3. 半径
4. 开始角度 Math.PI 约等于 180°
5. 结束角度
6. 是否逆时针绘制 可选参数 默认 顺时针

    var cc = document.getElementsByClassName("myCanvas")[0];
    var ctx = cc.getContext("2d");
	ctx.arc(150,100,100,0*Math.PI,Math.PI/180*180);
	ctx.strokeStyle = "green";
	ctx.lineWidth = 1;
	ctx.closePath();
	ctx.fillStyle = "red";
	ctx.fill();
	ctx.stroke();
	

canvas动画 - 时钟

详细的代码在资源中