05.HTML5(canvas)-阿里云开发者社区

05.HTML5(canvas)

2018-03-20 847

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Title function drawRect() { var a = document.

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

05.HTML5(canvas)

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

05.HTML5(canvas)

热门文章

最新文章

相关课程

相关电子书

相关实验场景