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

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

下面是利用canvas绘制一个简单的五角星的代码,跟大家分享一下,有条件或者感兴趣的朋友都可以的敲一下,代码内相关的数据大家可以根据需要自行更改
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>绘制五角星</title>
</head>
<body onload="draw('canvas')">
        <script>
        function draw(id){
                var canvas=document.getElementById(id);//获取对象id
                var context=canvas.getContext("2d");//设置画图类型为2d类型
                context.width=500;      //设置画布的宽度
                context.height=500;     //设置画布高度
                context.fillStyle="#eeeeee";  //设置画布颜色
                context.fillRect(0,0,500,500);  //画一个矩形
                context.translate(100,100);   //星星的位置
                createStar(context);      
                context.fill();
        }

        function createStar(context){
                var dx=100;
                var dy=0;
                var s=50;
                context.beginPath();       //设置绘图路径
                context.fillStyle="rgba(255,0,0,0.5)";
                var x=Math.sin(0);
                var y=Math.cos(0);
                var dig=Math.PI/5*4;
                for(var i=0;i<5;i++){
                        var x=Math.sin(i*dig);
                        var y=Math.cos(i*dig);
                        context.lineTo(dx+x*s,dy+y*s);
                }
                context.closePath();    //关闭绘图路径
        }
        </script>
        <canvas id="canvas" width=500 height=500></canvas>
</body>
</html>

12 个回复

正序浏览
Aria 发表于 2016-7-18 09:10
顶顶顶↖(^ω^)↗

多谢大侠仗义相助,小弟感激不尽
回复 使用道具 举报
Aria 中级黑马 2016-7-18 09:10:59
12#
顶顶顶↖(^ω^)↗
回复 使用道具 举报
南国之南 发表于 2016-7-11 21:32
可以可以,都是为了分啊,不容易啊

懂我  一句话说出了我的心情
回复 使用道具 举报

可以可以,都是为了分啊,不容易啊
回复 使用道具 举报
双击评论666
回复 使用道具 举报
以我之名 发表于 2016-7-10 15:48
好的  还是谢谢了

小意思啦,你也可以尝试一下,做完笔记还可以分享赚黑马币,挺好的
回复 使用道具 举报
南国之南 发表于 2016-7-9 12:36
这个倒是不太清楚,因为我现在是处于自学阶段,然后怕忘得快,所以都是在学习的时候做下笔记,顺便跟大家 ...

好的  还是谢谢了
回复 使用道具 举报
以我之名 发表于 2016-7-9 12:00
课程笔记是面试必备的么?求解 谢谢

这个倒是不太清楚,因为我现在是处于自学阶段,然后怕忘得快,所以都是在学习的时候做下笔记,顺便跟大家分享一下
回复 使用道具 举报
南国之南 发表于 2016-7-9 11:42
就是啊,为了分,我现在都没办法了,好在我每天有做课程笔记,还可以凑数 ...

课程笔记是面试必备的么?求解 谢谢
回复 使用道具 举报
梦里千年 发表于 2016-7-9 08:38
赞一个,不好混啊

就是啊,为了分,我现在都没办法了,好在我每天有做课程笔记,还可以凑数
回复 使用道具 举报
赞一个,不好混啊
回复 使用道具 举报
6666666666666666666666666
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马