Home > Q&A > body text

javascript - Html5 Canvas无法绘图

<!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的五角星，结果不显示五角星

PHP中文网2894 days ago593

reply all(1)I'll reply

怪我咯2017-04-10 12:44:27

应该是0.95，而不是0,95,代码中的
context.scale(0,95,0,95);
应该是
context.scale(0.95,0.95);
我了个擦啊，从下午遇到lz的问题研究到晚上，突然觉悟发现这个问题！

reply

Cancelreply