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）;