canvas画图

最新推荐文章于 2025-09-05 11:22:47 发布

weixin_33692284

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量68

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yuwensong/p/5169343.html

本文展示了如何在HTML页面中利用canvas元素绘制基本的几何图形，并应用线性渐变填充。通过简单的JavaScript代码，实现了绘制矩形、直线、圆形及应用渐变颜色的动态效果。

<!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>