老师，求源码
折耳猫chi
2015-04-08 20:18
老师，能否把改编后的星空的代码传上来一下，视频里不太全，自己没实现那个功能
2回答
-
- echoling02
- 2016-05-19 11:00:28
<html>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
当前浏览器不支持Canvas，请更换浏览器后再试</canvas>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("canvas");
canvas.width=800;
canvas.height=800;
var context=canvas.getContext("2d");
context.fillStyle="black";
context.fillRect(0,0,canvas.width,canvas.height);
for(var i=0;i<200;i++){
var r=Math.random()*10+2;
var x=Math.random()*canvas.width;
var y=Math.random()*canvas.height;
var a=Math.random()*360;
drawStar(context,x,y,r,a);
}
}
function drawStar(cxt,x,y,R,rot){
cxt.save();
cxt.translate(x,y);
cxt.rotate(rot/180*Math.PI);
cxt.scale(R,R);
starPath(cxt);
cxt.fillStyle="#fb3";
//cxt.strokeStyle="#fd5";
//cxt.lineWidth=3;
cxt.lineJoin="round";
cxt.fill();
//cxt.stroke();
cxt.restore();
}
function starPath(cxt){
cxt.beginPath();
for(var i=0;i<5;i++)
{
cxt.lineTo(Math.cos((18+i*72)/180*Math.PI),
-Math.sin((18+i*72)/180*Math.PI));
cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,-Math.sin((54+i*72)/180*Math.PI)*0.5);
}
cxt.closePath();
}
</script>
</body>
</html>
供参考
-
- 慕哥6404025
- 2016-01-06 17:13:21
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = 600;
canvas.height = 500;
context.fillStyle = "#000";
context.fillRect( 0, 0,canvas.width,canvas.height);
for (i = 0; i < 100; i++) {
var r = Math.random() * 10 + 10;
var x = Math.random() * canvas.width;
var y = Math.random() * canvas.height;
var a = Math.random() * 360;
drawPath(context, x, y, r, a);
}
}
function drawPath(ctx, xw, yw, R, rot) {
ctx.save();
ctx.translate(xw, yw);
ctx.rotate(rot / 180 * Math.PI);
ctx.scale(R,R);
starPath(ctx);
//ctx.lineWidth = 3;
//ctx.lineJoin = "round";
ctx.fillStyle = "#fb3";
//ctx.strokeStyle = "#fb5";
ctx.fill();
//ctx.stroke();
ctx.restore();
}
//绘制五角星,其中参数rot表示旋转的角度
function starPath(ctx) {
ctx.beginPath();
for (var i = 0; i < 5; i++) {
ctx.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI) ,
-Math.sin((18 + i * 72) / 180 * Math.PI)
)
ctx.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI)*0.5 ,
-Math.sin((54 + i * 72) / 180 * Math.PI)*0.5
)
}
ctx.closePath();
}
</script>
Canvas绘图详解
72881 学习 · 422 问题
相似问题