Canvas标签基础

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CANVAS</title>
</head>
<body>
    <canvas height="800" width="800" style="background: pink" id="canvas1">
        您的当前浏览器版本不支持canvas标签
    </canvas>
    <script type="text/javascript">
        //获取标签元素
        var ext = document.getElementById("canvas1");
        // alert(ext)
        //创建环境
        var cxt=ext.getContext("2d");
        //画直线
            cxt.beginPath();
            cxt.lineWidth=10;
            cxt.strokeStyle="#ff9900";
            cxt.moveTo(20,20);
            cxt.lineTo(100,20);
            cxt.stroke();
            cxt.closePath();
            //画圆  空心
            cxt.beginPath();
            cxt.lineWidth=3;
            cxt.strokeStyle="green";
            cxt.arc(70,100,50,0,360,false);
            cxt.stroke();
            cxt.closePath();
            //画圆  实心
            cxt.beginPath();
            cxt.lineWidth=3;
            cxt.fillStyle="yellow";
            cxt.arc(200,100,50,0,360,false);
            cxt.fill();
            cxt.stroke();
            cxt.closePath();
            //画矩形 空心
            cxt.beginPath();
            // cxt.rect(10,200,60,60);
            // cxt.stroke();下面一句代码就是简写，推荐用下面的写法
            cxt.strokeRect(10,200,60,60);
            cxt.closePath();
            //画矩形 实心
            cxt.beginPath();
            // cxt.rect(80,200,60,60);
            // cxt.fill();下面一句代码就是简写，推荐用下面的写法
            cxt.fillRect(80,200,60,60);
            cxt.closePath();
            //添加文本
            cxt.beginPath();
            cxt.font="40px 宋体";
            cxt.fillText("无兄弟",20,300);
            cxt.lineWidth=1;
            cxt.strokeText("无兄弟",20,350);
            cxt.closePath();
            //将图片画到画布上面去 谷歌不支持
            var img=new Image();
            img.src="0.jpg";
            cxt.drawImage(img,20,400,400,300);
            //画三角形
            cxt.beginPath();
            cxt.moveTo(200,20);
            cxt.lineTo(300,20);
            cxt.lineTo(350,50);
            cxt.lineTo(200,20);
            cxt.closePath();
            cxt.fill();
            cxt.stroke();
            //旋转一个字段
            cxt.save();
            cxt.translate(20,20);
            cxt.rotate(-60*Math.PI/180);
            cxt.beginPath();
            cxt.lineWidth=10;
            cxt.moveTo(0,0);
            cxt.lineTo(20,100);
            cxt.stroke();
            cxt.closePath();
            cxt.restore();
            //旋转图片
            cxt.save();
                cxt.translate(20,400);
                cxt.rotate(-10*Math.PI/180);
                var img =new Image();
                img.src="0.jpg";
                cxt.drawImage(img,0,0,400,300);
                cxt.restore();
            
    </script>
</body>
</html>
posted @ 2017-05-23 12:09 火星黑洞阅读(319) 评论(0) 收藏举报
刷新页面返回顶部