为什么没有星星

来源:4-3 应用translate、rotate和scale

宝慕林2917688

2016-12-16 14:33

<script type="text/javascript">

window.onload = function() {

// 初始化

var canvas  = document.getElementById("canvas");

var context = canvas.getContext("2d");

// 画布设置

canvas.width = 800;

canvas.height = 800;

   context.fillStyle = "black";

   context.fillRect(0,0,canvas.width,canvas.height);


  // 绘画星星

// 星星参数

for(var i = 0; i <=200; i++)

{

var r = Math.random()*40+20;

var x = Math.random()*canvas.width;

var y = Math.random()*canvas.height;

var a = Math.random()*360;

draw(context,x,y,r,a);

}


}

function draw(cxt,x,y,r,rot){

cxt.save();


cxt.translate( x , y );

cxt.rotate(rot/180 * Math.PI);


star(cxt);


cxt.fillStyle = "#fb3";

cxt.strokeStyle = "#fd5";

cxt.lineWidth = 3;

cxt.lineJoin = "round";


cxt.fill();

cxt.stroke();


cxt.restore();

}


function star(cxt){

cxt.beginPath();

for(var i = 0; i < 5; i++){

cxt.lineTo(Math.cos((18+i*72)/180*Math.PI*20),

 -Math.sin((18+i*72)/180*Math.PI)*20 );

cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5*20,

-Math.sin((54+i*72-)/180*Math.PI)*0.5*20);

}

cxt.closePath();

}

</script>


写回答 关注

2回答

  • 红书包
    2016-12-16 15:59:47
    已采纳

    for(var i = 0; i < 5; i++){

    cxt.lineTo(Math.cos((18+i*72)/180*Math.PI*20),

     -Math.sin((18+i*72)/180*Math.PI)*20 );

    cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5*20,

    -Math.sin((54+i*72-)/180*Math.PI)*0.5*20);

    最后一排多了个“-”号


    红书包 回复宝慕林291...

    不是有一句话叫旁观者清嘛。所以啰

    2016-12-19 17:49:44

    共 3 条回复 >

  • 红书包
    2016-12-16 16:34:10


    cxt.lineTo(Math.cos((18+i*72)/180*Math.PI*20),这个“*20”要放在括号的外面


Canvas绘图详解

Canvas系列教程第二课,详解Canvas各接口,让同学彻底掌握Canvas绘图

72910 学习 · 422 问题

查看课程

相似问题