A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 南国之南 中级黑马   /  2016-7-8 23:30  /  1908 人查看  /  3 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

利用canvas绘制图形需要有4个步骤:
1、开创路径,创建图形的路径
2、关闭路径和设定绘制样式
3、调用绘制方法
4、绘制路径

canvas画圆
<body onload="draw('canvas')">
        <script>
        function draw(id){
                var canvas=document.getElementById(id);
                if(canvas==null){
                        return false;
                }
                var context=canvas.getContext("2d");
                context.fillStyle="#cccccc";
                context.width=600;
                context.heught=600;
                context.fillRect(0,0,600,600);
                for(var i=0;i<=10;i++){
                        context.beginPath();
                        context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
                        context.closePath();
                        context.fillStyle="rgba(255,0,0,0.25)";
                        context.fill();
                }
        }
        </script>
        <canvas id="canvas" style="width:600px;height:600px"></canvas>
         
</body>
利用move to和line to来绘制一个带角的圆形
代码示例:
<body onload="draw('canvas')">
<script>
        function draw(id){
                var canvas=document.getElementById(id);
                var context=canvas.getContext("2d");
                context.width=500;
                context.heught=500;
                context.fillStyle="#cccccc";
                context.fillRect(0,0,300,300);

                var dx=150;
                var dy=80;
                var s=70;
                context.beginPath();
                context.fillStyle="rgb(100,255,100)";
                context.strokeStyle="rgb(0,0,100)";
                var x=Math.sin(0);
                var y=Math.cos(0);
                var dig=Math.PI/15*11;
                for(var i=0;i<=30;i++){
                        var x=Math.sin(i*dig);
                        var y=Math.cos(i*dig);
                        context.lineTo(dx+x*s,dy+y*s);
                }
                context.closePath();
                context.fill();
                context.stroke();
        }
        </script>
        <canvas id="canvas" style="width:300px;height:300px"></canvas>
</body>

3 个回复

倒序浏览
努力就是对自己最大的回报! 
回复 使用道具 举报
黄晓蚁 发表于 2016-7-20 16:58
努力就是对自己最大的回报! 

努力过才不会后悔,加油
回复 使用道具 举报
牛啊, 天天看到你在学习, 我基础视频还刚看到CSS!!
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马