為什么我的黑背景顯示不出來?。?/h1>
<!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>
<!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>
2017-11-13
var context = canvas.getContext('2d');
context.fillStyle = "black";
drawStar( context, 150, 300, 400, 400, 20 );