读HTML5应用与开发实践【三】【canvas圆、贝赛尔曲线、样式与颜色】-CSDN博客

本文链接：https://blog.csdn.net/lx583274568/article/details/45289197
<!Doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html";charset="utf-8">
        <title>canvas</title>
        <script language=javascript>
            function draw()
            {
                var canvas=document.getElementById('1');
                var context=canvas.getContext('2d');
                context.globalAlpha=0.7;
                context.beginPath();
                context.moveTo(60,100);
                context.lineTo(700,450);
                context.lineTo(400,145);
                context.lineTo(60,200);
                context.fillStyle="green";
                context.strokeStyle="black";
                context.closePath();
                context.fill(); 
                context.stroke();
                context.fillStyle="yellow";
                context.fillRect(100,100,50,135);
                context.beginPath();
                context.arc(200,400,50,0,2*Math.PI,true);
                context.closePath();
                context.fillStyle="rgba(255,0,0,0.25)";
                context.fill();
                context.beginPath();
                context.arc(180,390,10,0,2*Math.PI,true);
                context.fillStyle="rgba(255,0,0,0.8)";
                context.fill();
                context.closePath();
                //右眼
                context.beginPath();
                context.arc(220,390,10,0,2*Math.PI,true);
                context.fillStyle="rgba(255,0,0,0.8)";
                context.fill();
                context.closePath();
                //嘴
                context.beginPath();
                context.lineWidth=3;
                context.lineCap="round";
                context.arc(200,413,20,Math.PI,0,true);
                context.strokeStyle="rgba(255,0,0,0.8)";
                context.stroke();
                
                //贝赛尔曲线0.0 爱心
                context.beginPath();
                context.strokeStyle="rgba(255,0,0,1)";
                context.moveTo(375,40);
                context.bezierCurveTo(375,37,370,25,350,25);
                context.bezierCurveTo(320,25,320,62.5,320,62.5);
                context.bezierCurveTo(320,80,340,102,375,120);
                context.bezierCurveTo(410,102,430,80,430,62.5);
                context.bezierCurveTo(430,62.5,430,25,400,25);
                context.bezierCurveTo(385,25,375,37,375,40);
                context.stroke();
                //框框渐变
                for(var i=0;i<6;i++)
                {
                    for(var j=0;j<6;j++)
                    {
                        context.fillStyle='rgb('+Math.floor(255-42.5*i)+','+Math.floor(255-42.5*j)+',0)';
                        context.fillRect(j*25+400,i*25+400,25,25);
                    }
                }
                //圈圈渐变
                for(i=0;i<6;i++)
                {
                    for(j=0;j<6;j++)
                    {
                        context.strokeStyle='rgb('+Math.floor(255-42.5*i)+','+Math.floor(255-42.5*j)+',0)';
                        context.beginPath();
                        context.arc(500+i*25,12.5+j*25,10,0,Math.PI*2,true);
                        context.stroke();
                    }
                }
                
                window.addEventListener("load",drawDiagonal,ture);
            }
        </script>
    </head>
    <body>
        <canvas id="1" style="border: 1px solid skyblue" width="800" height="600">恩？
            <script>
                draw();
            </script>
        </canvas>
    </body>
</html>