为什么我的黑背景显示不出来啊？
elea
2017-11-10 11:53
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>五角星</title>
</head>
<body>
<canvas id="canvas" width="800" height="800" style="display:block; border:1px solid #bbb; margin:50px auto 0;"></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.heihgt );
drawStar( context, 150, 300, 400, 400, 20 );
}
function drawStar( cxt, r, R, x, y, rot ){
cxt.beginPath();
for( var i = 0; i < 5; i++ ){
cxt.lineTo( Math.cos( (18+i*72-rot)/180*Math.PI ) * R + x,
-Math.sin( (18+i*72-rot)/180*Math.PI ) * R + y );
cxt.lineTo( Math.cos( (54+i*72-rot)/180*Math.PI ) * r + x,
-Math.sin( (54+i*72-rot)/180*Math.PI ) * r + y );
}
cxt.closePath();
cxt.fillStyle = '#fb3';
cxt.strokeStyle = '#fb5';
cxt.lineWidth = 3;
cxt.lineJoin ='round';
cxt.fill();
cxt.stroke();
}
</script>
</body>
</html>
1回答
-
- smilevs
- 2017-11-13 10:05:55
var context = canvas.getContext('2d');
context.fillStyle = "black";
context.fillRect( 0, 0, canvas.width, canvas.heihgt );//这里的height写错了
drawStar( context, 150, 300, 400, 400, 20 );
Canvas绘图详解
72881 学习 · 422 问题
相似问题