html5学习之路（Canvas画布1）

[htML]  

!DOCTYPE html PubLIC "-//W3C//DTD XHTML 1.0 TransITional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

html XMlns="http://www.w3.org/1999/xhtml">  

head>  

meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

title> canvas示例/title>  

script type="text/javascript">  

    function mydrawRect(){  

        VAR canvas=document.getElementById("rect");  

        if (canvas==null){  

            return false;  

            }  

        var context=canvas.getContext('2d');  

        context.fillStyle="#EEEEFF";  

        context.fillRect(0,0,400,300);  

        context.fillStyle="red";  

        context.strokeStyle="blue";  

        context.lineWidth=1;  

        //绘制一个矩形  

        context.fillRect(50,50,100,100);  

        context.strokeRect(50,50,100,100);  

        //绘制一个圆  

        context.beginPath();  

        context.arc(200,200,50,0,Math.PI*2,true);  

        context.closePath();  

        context.fillStyle='rgba(255,0,0,0.25)';  

        context.fill();  

        //画直线  

        context.beginPath();  

        context.moveTo(100,100);  

        context.lineto(100,300);  

        context.lineTo(300,300);  

        context.closePath();  

        //context.fillStyle='rgba(255,0,0,0.25)';  

        //context.fill();  

        context.stroke();  

        }  

/script>  

/head>  

body onload="return mydrawRect(); ">  

canvas id="rect" width="400" height="300">  

/body>  www.2cto.COM

/html>  

显示效果：

[html]  

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

html xmlns="http://www.w3.org/1999/xhtml">  

head>  

meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

title> canvas示例/title>  

script type="text/javascript">  

    function mydrawRect(){  

        var canvas=document.getElementById("rect");  

        if (canvas==null){  

            return false;  

            }  

        var context=canvas.getContext('2d');  

        context.fillStyle="#EEEEFF";  

        context.fillRect(0,0,400,300);  

        context.fillStyle="red";  

        context.strokeStyle="blue";  

        context.lineWidth=1;  

        //绘制一个矩形  

        context.fillRect(50,50,100,100);  

        context.strokeRect(50,50,100,100);  

        //绘制一个圆  

        context.beginPath();  

        context.arc(200,200,50,0,Math.PI*2,true);  

        context.closePath();  

        context.fillStyle='rgba(255,0,0,0.25)';  

        context.fill();  

        //画直线  

        context.beginPath();  

        context.moveTo(100,100);  

        context.lineTo(100,300);  

        context.lineTo(300,300);  

        context.closePath();  

        //context.fillStyle='rgba(255,0,0,0.25)';  

        //context.fill();  

        context.stroke();  

        }  

/script>  

/head>  

body onload="return mydrawRect(); ">  

canvas id="rect" width="400" height="300">  

/body>  www.2cto.com

/html>  

显示效果：

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！