html5 绘图

前端html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>html5绘图</title>
</head>
<body>
   <canvas id="cansp" height="600px" width="500px" style="border: 1px solid red;"></canvas>
</body>
</html>

script：

 <script type="text/javascript">
        var can=document.getElementById("cansp");
        var ctxt=can.getContext("2d");

        //画直线
       ctxt.moveTo(20,20);
       ctxt.lineTo(20,100);
       ctxt.stroke();

       //画填充三角形 (路劲)
        ctxt.beginPath();//开始新路劲 因为上面的ctxt定位在20,20 否则会重合
        ctxt.moveTo(40,20); //移动到 40,20 (起点)
        ctxt.lineTo(40,100);//下一个点
        ctxt.lineTo(80,100);//下一个点
        ctxt.closePath(); //闭合路劲
        //ctxt.fill();//填充
        ctxt.stroke();//画线  (相对 file空心)

       //画出矩形可以不要路劲
        ctxt.strokeRect(100,20,70,80);

        //实心矩形
        ctxt.fillStyle="red";
        ctxt.fillRect(200,20,70,50);

       //圆形
        ctxt.beginPath();
        ctxt.arc(300,50,20,0,360,true);
        ctxt.closePath();
        ctxt.stroke();

       //实心
        ctxt.beginPath();
        ctxt.fillStyle="yellow";
        ctxt.arc(350,50,20,0,360,true);
        ctxt.closePath();
        ctxt.fill();

       //画图像(第一创建image 对象)
       var img=new Image();
       img.src="img/a.jpg";
       img.onload=function(){
        ctxt.drawImage(img,20,120,254,356);
       };

       //在画布上画字
        var text="伊丽莎白一世";
        ctxt.fillStyle="#0000FF";
        ctxt.font="30px 宋体";
       ctxt.fillText(text,300,150);
   </script>

图片：

posted @ 2013-05-18 02:28  s_p  阅读(263)  评论(2)    收藏  举报