1
894<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas demo</title>
<script type="text/javascript">
function draw(id){
var canvas = document.getElementById(id);
if(canvas == null){
return false;
}
var context = canvas.getContext('2d');
context.fillStyle = '#EEEEFF';
context.fillRect(0,0,400,300);
//绘图
context.translate(200,50);
for(var i = 0;i < 50;i++){
context.translate(25,25);
context.scale(0,95,0,95);
context.rotate(Math.PI / 10);
create5star(context);
context.fill();
}
}
function create5star(context){
var n = 0;
var dx = 100;
var dy = 0;
var s = 50;
//创建路径
context.beginPath();
context.fillStyle = 'rgba(255,0,0,0.5)';
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 5 * 4;
for(var i = 0;i < 5;i++){
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.lineTo(dx + x * s,dy + y * s);
}
context.closePath();
}
</script>
</head>
<body onload="draw('canvas');">
<h1>Demo</h1>
<canvas id="canvas" width="400" height="300"/>
</body>
</html>
代码运行不成功，应该绘制如图1的五角星，结果不显示五角星
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
应该是0.95，而不是0,95,代码中的
context.scale(0,95,0,95);
应该是
context.scale(0.95,0.95);
我了个擦啊，从下午遇到lz的问题研究到晚上，突然觉悟发现这个问题！