<!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的五角星，结果不显示五角星
解决方案
应该是0.95，而不是0,95,代码中的
context.scale(0,95,0,95);
应该是
context.scale(0.95,0.95);
我了个擦啊，从下午遇到lz的问题研究到晚上，突然觉悟发现这个问题！