慕桂英1607375
2018-06-04 15:30
<!DOCTYPE html>
<html>
<head>
<title>星空</title>
</head>
<body>
<canvas id = "canvas" style="border:1px solid #ccc;margin:50px auto ;display:block">
该浏览器不支持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);
// context.strokeRect=(0,0,canvas.width,canvas.height);
// context.stroke();
drawStar(context,300,100,400,400,30);
}
function drawStar(cxt,R,r,x,y,rot){
cxt.beginPath();
for(var i=0;i<5;i++){
cxt.lineTo(Math.cos((18+72*i-rot)/180*Math.PI)*R+x,-Math.sin((18+72*i-rot)/180*Math.PI)*R+y);
cxt.lineTo(Math.cos((54+72*i - rot)/180*Math.PI)*r+x,-Math.sin((54+72*i- rot)/180*Math.PI)*r+y);
}
cxt.closePath();
cxt.fillStyle = '#FB3';
cxt.strokeStyle = '#FD5';
cxt.lineJoin = 'round';
cxt.lineWidth = 3;
cxt.fill();
cxt.stroke();
}
</script>
</body>
</html>
写错了!!!!是这样子写的 context.fillRect(0,0,canvas.width,canvas.height);
Canvas绘图详解
72881 学习 · 422 问题
相似问题