canvas画图 

<!DOCTYPE html>
<html>
    <head>
        <title>canvas</title>
    </head>
    <body>
        <canvas id="canvas" width="500" height="600" style="border:1px solid #ddd;">
            浏览器不支持
        </canvas>
        <script type="text/javascript">
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            
            
            // context.moveTo(10,10);
            // context.lineTo(150,50);
            // context.lineTo(10,50);
            // context.stroke();
            
            //划矩形 200*200
            context.fillStyle = "#ff0000";
            context.fillRect(0,0, 500,600);
            
            //划线
            context.moveTo(200,200);
            context.lineTo(500,500);
            context.lineTo(150,300);
            context.stroke();//执行划线    
            
            //划圆
            context.fillStyle = "#00ff00";
            context.beginPath();
            context.arc(250,300,50,0,2*Math.PI, true);
            context.closePath();
            context.fill();
            
            //划渐变
            var gradient = context.createLinearGradient(0,0,250,0);
            gradient.addColorStop(0, "#ff0000");
            gradient.addColorStop(1, "#00ff00");
            context.fillStyle = gradient;
            context.fillRect(0,0,250,250);
            
            //划现有的图片
            var img = new Image();
            img.src = "1.jpg";
            context.drawImage(img, 0, 0);
                    
        </script>
    </body>
</html>

 

效果如下：

posted @ 2016-01-29 16:19  天道酬勤，坚持！  阅读(323)  评论(0)  编辑  收藏  举报