HTML5 - canvas标签

浏览数：17 / 时间：2015年06月09日

canvas标签

<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <title>canvas标签</title>
    <head>
    <body>
        <!-- canvas的宽和高建议直接使用width、height属性设置，同时不要指定单位px -->
        <canvas id="canvas" width="500" height="800" style="background:#ccc;">
            您的浏览器不支持canvas标签，请升级浏览器！
        </canvas>
        <script>
            //获取画布对象
            var canvas=document.getElementById("canvas");
            //alert(canvas);
            //获取用于绘画的上下文环境
            var cxt=canvas.getContext("2d");
            //alert(cxt);

            //画一条线段
            cxt.beginPath();//开启一个新路径
            cxt.lineWidth=10;//设置画笔的宽度
            cxt.strokeStyle="red";//设置画笔的颜色
            cxt.moveTo(20,20);//设置笔触的位置,即起始点
            cxt.lineTo(100,20);//设置终点的位置
            cxt.stroke();//画线
            cxt.closePath();//关闭路径

            //画一个圆形，空心圆
            cxt.beginPath();
            cxt.lineWidth=3;
            cxt.strokeStyle="yellow";
            cxt.arc(200,200,50,0,360,false); //200,200表示圆心位置，50表示半径，0,360表示角度范围，false表示逆时针，true顺时针
            cxt.stroke();
            cxt.closePath();

            //画一个实心圆
            cxt.beginPath();
            cxt.fillStyle="pink";
            cxt.arc(400,200,50,0,360,false);
            cxt.fill();//画实心圆
            cxt.stroke();//画空心圆
            cxt.closePath();

            //画一个矩形，空心矩形
            cxt.beginPath(); 
            /*cxt.rect(200,300,100,50);//200,300表示起始点，100,50表示长和宽
            cxt.stroke(); */
            cxt.strokeRect(200,300,100,100);//建议使用此方式
            cxt.closePath();

            //画一个实心矩形
            cxt.beginPath();
            /*cxt.rect(350,300,50,100);
            cxt.fill();*/
            cxt.fillRect(350,300,50,200); //建议使用此方式
            cxt.closePath();

            //将一段文字写到画布中
            cxt.font="30px 黑体";//设置css font属性
            cxt.fillStyle="red";
            cxt.fillText("欢迎来到南京网博！",20,500);
            cxt.lineWidth=1;
            // 创建渐变
            var gradient=cxt.createLinearGradient(0,0,canvas.width,0);
            gradient.addColorStop("0","magenta");
            gradient.addColorStop("0.5","blue");
            gradient.addColorStop("1.0","red");
            // 用渐变填色
            cxt.strokeStyle=gradient;
            cxt.strokeText("welcome to itany!",20,550);

            //画一个三角形
            cxt.beginPath();
            cxt.moveTo(300,500);
            cxt.lineTo(300,600);
            cxt.lineTo(400,500);
            cxt.closePath(); //需要先关闭路径再画
            cxt.stroke();   
            cxt.fill();

            //将一幅图片添加到画布中
            var img=new Image();
            img.src="dog.jpg";
            cxt.drawImage(img,100,400);
        </script>
    </body>
</html>