canvas初级示例

最新推荐文章于 2025-05-17 09:39:35 发布

原创最新推荐文章于 2025-05-17 09:39:35 发布 · 434 阅读

CC 4.0 BY-SA版权

    <!DOCTYPE HTML>
    <html>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script>
        window.onload = function()
        {
            var myCanvas = document.getElementById("myCanvas");
            var context = myCanvas.getContext("2d");
            context.strokeStyle = "blue";
            context.lineWidth = 3;
           //开始画线
            context.beginPath();
           //画矩形
            context.strokeRect(0,0,300,300);
           //开始画线
           context.beginPath();
           //笔触颜色
            context.strokeStyle = "red";
            //画线起点
           context.moveTo(50,50);
            //画线终点
           context.lineTo(100,100);
           //绘制当前路径
           context.stroke();

           context.beginPath();
            context.strokeStyle = "green";
            context.lineWidth = 3.5;
           context.moveTo(100,100);
            context.lineTo(200,150);
           context.lineTo(200,80);
            context.stroke();

//文字示例

           context.strokeStyle = "red";
           context.lineWidth = 1;
           context.strokeText("世界你好", 110, 200);
        }
    </script>
    <canvas id=myCanvas width=300 height=300>你的浏览器不支持canvas</canvas>
    </html>