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