黑马程序员技术交流社区

标题: 利用canvas画一个星星，超级简单 [打印本页]

作者: 南国之南 时间: 2016-7-8 23:16
标题: 利用canvas画一个星星，超级简单
下面是利用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>

作者: 梦想追逐者 时间: 2016-7-9 00:08
6666666666666666666666666

作者: 梦里千年 时间: 2016-7-9 08:38
赞一个，不好混啊

作者: 南国之南 时间: 2016-7-9 11:42

梦里千年发表于 2016-7-9 08:38
赞一个，不好混啊

就是啊，为了分，我现在都没办法了，好在我每天有做课程笔记，还可以凑数

作者: 以我之名 时间: 2016-7-9 12:00

南国之南发表于 2016-7-9 11:42
就是啊，为了分，我现在都没办法了，好在我每天有做课程笔记，还可以凑数 ...

课程笔记是面试必备的么?求解谢谢

作者: 南国之南 时间: 2016-7-9 12:36

以我之名发表于 2016-7-9 12:00
课程笔记是面试必备的么?求解谢谢

这个倒是不太清楚，因为我现在是处于自学阶段，然后怕忘得快，所以都是在学习的时候做下笔记，顺便跟大家分享一下

作者: 以我之名 时间: 2016-7-10 15:48

南国之南发表于 2016-7-9 12:36
这个倒是不太清楚，因为我现在是处于自学阶段，然后怕忘得快，所以都是在学习的时候做下笔记，顺便跟大家 ...

好的还是谢谢了

作者: 南国之南 时间: 2016-7-10 18:33

以我之名发表于 2016-7-10 15:48
好的还是谢谢了

小意思啦，你也可以尝试一下，做完笔记还可以分享赚黑马币，挺好的

作者: 151678537 时间: 2016-7-10 22:48
双击评论666

作者: 南国之南 时间: 2016-7-11 21:32

151678537 发表于 2016-7-10 22:48
双击评论666

可以可以，都是为了分啊，不容易啊

作者: 151678537 时间: 2016-7-14 18:29

南国之南发表于 2016-7-11 21:32
可以可以，都是为了分啊，不容易啊

懂我一句话说出了我的心情

作者: Aria 时间: 2016-7-18 09:10
顶顶顶↖(^ω^)↗

作者: 南国之南 时间: 2016-7-18 22:05

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

多谢大侠仗义相助，小弟感激不尽

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2