05.HTML5(canvas)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">
        function drawRect() {
            var a = document.getElementById("c1");
            var context = a.getContext("2d");
            context.fillStyle="#FF0000";
            context.fillRect(0,0,500,500);
        }
        
        function drawLine() {
            var b = document.getElementById("c1");
            var cont = b.getContext("2d");
            cont.moveTo(0,0);
            cont.lineTo(50,40);
            cont.lineTo(80,50);
            cont.stroke();
        }
        function drawCircle() {
            var c = document.getElementById("c1");
            var ctx = c.getContext("2d");
            ctx.fillStyle="#00ff00";
            ctx.beginPath();
            ctx.arc(100,100,20,0,Math.PI*2,false);
            ctx.closePath();
            ctx.fill();
        }
        function drawGradient() {
            var c = document.getElementById("c1");
            var context = c.getContext("2d");
            var grd = context.createLinearGradient(0,200,500,200);
            grd.addColorStop(0,"#ff0000");
            grd.addColorStop(1,"#0000ff");
            context.fillStyle=grd;
            context.fillRect(0,200,500,200);
        }

        function drawImage() {
            var c = document.getElementById("c1");
            var context = c.getContext("2d");
            var image = new Image();
            image.src="asset/a.jpg";
            context.drawImage(image,0,0);
        }
    </script>
</head>
<body>
<button onclick="drawRect()">绘制</button>
<button onclick="drawLine()">画线</button>
<button onclick="drawCircle()">画圆</button>
<button onclick="drawGradient()">画渐变色</button>
<button onclick="drawImage()">画图片</button>
<canvas height="5000" width="5000" id="c1">
    Your browser does not support the canvas element.
</canvas>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容