南宁小程序开发,挑战百日学习计划第47天(canvas画板工具1)

南宁小程序开发：www.nasiot.com

canvas画板工具 ，一定要在canvas里面写width height 否则会导致画线被强制放大

<canvas id="c" width="500" height="300" style="border:1px solid #333"></canvas>

画一个矩形

   var c=document.getElementById("c");
   var ctx=c.getContext("2d");
    ctx.moveTo(20,20);
	ctx.lineTo(120,20);
	ctx.lineTo(120,120);
	ctx.lineTo(20,120);	
    ctx.closePath();
    ctx.stroke();

运行结果如下：

画三角形 ：主要使用的 closePath（）代码如下

var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.moveTo(20,20);
ctx.lineTo(20,120);
ctx.lineTo(120,120);
ctx.closePath();
ctx.strokeStyle="blue";
ctx.stroke();

显示结果：

画圆：arc

var c=document.getElementById("canvas");
var ctx=c.getConText("2d");
    ctx.arc(100,100,80,0,2*Math.PI);
    ctx.stroke();

显示效果：

canvas 文本绘制
font 定义字体
fillText(text,x,y) // text=要绘制的文字 X Y 则是 绘制的起始位置
strokeText（text，x，y）绘制文字 空楼的

var c=document.getElementById("c"); 
		   var ctx=c.getContext("2d")
		       ctx.font="20px 黑体 ";
			   ctx.fillStyle="#123";
		       ctx.fillText("南宁程序开发：Www.NasIot.Com！",10,100)

显示结果如下

企业小程序oa系统开发定制：www.nasiot.com