鍍金池/ 問(wèn)答/HTML5  HTML/ Html5 Canvas無(wú)法繪圖

Html5 Canvas無(wú)法繪圖

<!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;
            //創(chuàng)建路徑
            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>

代碼運(yùn)行不成功,應(yīng)該繪制如圖1的五角星,結(jié)果不顯示五角星
1
2

回答
編輯回答
尛憇藌

可以看下這個(gè)h5 canvas繪制在線時(shí)鐘 http://www.aazzp.com/2017/11/...

2018年7月17日 01:46
編輯回答
薄荷綠

應(yīng)該是0.95,而不是0,95,代碼中的
context.scale(0,95,0,95);
應(yīng)該是
context.scale(0.95,0.95);
我了個(gè)擦啊,從下午遇到lz的問(wèn)題研究到晚上,突然覺(jué)悟發(fā)現(xiàn)這個(gè)問(wèn)題!

2018年5月16日 20:51