canvas 绘制图形

canvas 绘制图形：

　　注意： canvas 的宽高设置在行内，否则会使画布（canvas）产生扭曲，绘图变形；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #canvas {
            background: #3B5998;
        }
    </style>
    <script>
        window.onload = function () {
//         画布
            var c = document.getElementById("canvas");
            /*获取上下文*/
            var cxt = c.getContext("2d");
            cxt.strokeStyle = "#09f";//线条的颜色；
            cxt.fillStyle= "#ff0000";//填充的颜色；

//            画线条：
//            cxt.moveTo( 100, 100 ); //起始点
//            cxt.lineTo( 300, 100 ); //终点；
//            cxt.stroke(); // 渲染出图形；

//            画矩形;
//            填充一个矩形；
//            cxt.fillRect( 50, 50, 300, 100 );//x, y, 宽， 高
//            cxt.strokeStyle = "#09f";
//            cxt.strokeRect( 50, 50, 300, 100 ); //空矩形

//            画圆：
//            true: 逆时针， false : 顺时针
//            arc(x,y,半径，起始度数，终止读数)
            cxt.arc(200,200,50,0*Math.PI,Math.PI*2,true);

//            绘制文本；
//            cxt. font = "80px Arial";
//            填充文本（实体）
//            cxt.fillText("这是文本", 50, 100);
//              线条文本（空心）
//            cxt.strokeText("这是文本", 50, 100)

//            绘制图画
//            var img  = new Image();
//            img.src = "../image/1.jpg";
//            消除图片加载模糊的问题
//            img.onload = function () {
//              cxt.drawImage(img, 100, 100, 200, 200 );
//            }

//            最后： 渲染出图案；
//            cxt.stroke();//空心的；
            cxt.fill();//填充的；
        }
    </script>
</head>
<body>
<canvas id="canvas" width="400px" height="400px">
    请升级到ie9以上版本
</canvas>
</body>
</html>

posted on 2017-03-01 19:42 梦幻飞雪阅读(268) 评论(0) 编辑收藏举报