JS画图

在网页上如何利用JS画图

在HTML5中的canvas标签无疑是非常方便的，利用canvas和JS我们可以很方便的画出矩形，圆，等各种简单复杂的图形。

<canvas>元素必须设置width和height属性指定区域大小。

<canvas
id="drawing"
width="400" height="300"></canvas>
要在canvas元素上画图必须获得绘图的上下文，需要调用getContext()方法并传入上下文的名字。

例如var canvas =document.getElementById("drawing");
if (canvas ==
null)
return
false;
var context = canvas.getContext("2d");
在使用canvas元素之前必须检查getContext方法是否存在。
利用toDataurl()方法可以将canvas画好的图像保存成图片
var imgurl = canvas.toDataURL("img.png");//将canvas画出的图像保存在img.png图像中
var img = document.createElement("img");//新建img元素
img.src= imgurl;
//img元素的路径为imgurl
document.body.appendChild(img); //在body页面中显示

JS画出矩形主要有介绍两种函数，

context.fillStyle = "red";
context.strokeStyle = "blue";
context.fillRect(0, 120, 100, 100);
context.strokeRect(120, 120, 100, 100);
fillRect()填充，strokeRect()边框。fillStyle 和strokeStyle是颜色属性

JS画其他图形

arc(x,y,rad,startangle,endangle,countclockwise)//;以（x，y）为圆心，rad为半径画弧线，开始角度和结束角度，最后一个参数表示是否为逆时针,true表示逆时针。
arcTo(x1,y1,x2,y2,rad)//以rad为半径的圆经过两点坐标以及上一点坐标得到的在两点之间的弧线。
lineTo(x,y);//从上一点开始绘制一条直线，到（x，y）为止。moveTo(x,y);//
将绘图游标移动到（x,y），不划线。
文本
canvas.font="bold 14px Arial";//字体

context.textAlign="center";//对齐方式

context.textBaseline="middle";//文本的基线

context.fillText("12",100,20);//从（100,20）出开始写入12

context.strokeText("12",100,20);//边框，不是fill

变换

rotate(angle)//围绕源点旋转图像angle角度

scale(scaleX,scaleY)//缩放图像，在x方向乘以scaleX,在Y方向上乘以scaleY。

translate(x,y)//将坐标原点移动到（x，y）;