老師，求源碼
老師，能否把改編后的星空的代碼傳上來一下，視頻里不太全，自己沒實現那個功能
折耳貓chi
2015-04-08
2 回答
舉報
0/150
提交
取消
2016-05-19
<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>
供參考
2016-01-06
<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>