Canvas基礎知識

最新推荐文章于 2022-03-03 14:41:11 发布

lulu_jiang

最新推荐文章于 2022-03-03 14:41:11 发布

阅读量898

点赞数

分类专栏： HTML5 文章标签： function html

本文链接：https://blog.csdn.net/lulu_jiang/article/details/7574324

版权

HTML5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html />
<html>
    <head>
        <title>Learning the basics of canvas</title>
        <meta charset="utf-8" />
        <script type="text/javascript" src="jquery-1.6.4.js"></script>
        <script type="text/javascript">
            $().ready(function () {
                //獲取canvas對象
                var canvas = $("#myCanvas");
                //得到2D渲染上下文，以便開始繪製圖形
                var context = canvas.get(0).getContext("2d");

                //繪製矩形
                context.fillRect(40, 40, 100, 100);
                //繪製矩形邊框
                context.strokeRect(200, 200, 100, 100);

                //繪製線條(實際稱為路徑)
                //開始路徑
                context.beginPath();
                //設置路徑原點
                context.moveTo(150, 150);
                //設置路徑終點
                context.lineTo(300, 300);
                //結束路徑
                context.closePath();
                //繪製路徑
                context.stroke();

                //繪製圓形(canvas并無繪製圓形的方法，只有繪製弧形的方法)
                //開始路徑
                context.beginPath();
                //繪製一個圓形
                context.arc(230, 90, 50, 0, Math.PI * 2, false);
                context.arc(350, 90, 50, 0, Math.PI, false);
                //結束路徑
                context.closePath();
                //context.stroke();
                context.fill();

                //樣式
                context.fillStyle = "rgb(255,0,0)";
                context.fillRect(0, 1, 20, 20);
                context.fillStyle = "rgb(0,255,0)";
                context.fillRect(25, 1, 20, 20);

                context.strokeStyle = "rgb(255,0,0)";
                context.strokeRect(50, 1, 20, 20);
                context.strokeStyle = "rgb(0,255,0)";
                context.strokeRect(75, 1, 20, 20);

                context.strokeStyle = "rgb(0,0,255)";
                context.beginPath();
                context.moveTo(100, 10);
                context.lineTo(300, 10);
                context.closePath();
                context.stroke();

                //修改線條寬度
                context.lineWidth = 5;
                context.strokeStyle = "rgb(255,0,0)";
                context.beginPath();
                context.moveTo(100, 20);
                context.lineTo(300, 20);
                context.closePath();
                context.stroke();

                context.lineWidth = 10;
                context.strokeStyle = "orange";
                context.strokeRect(350, 200, 100, 100);

                //繪製文本(使用canvas繪製文本並非好方法)
                var text = "Hello World!";
                context.fillStyle = "pink";
                context.font = "italic 50px serif";
                context.fillText(text, 10, 400);
                //繪製描邊文本
                context.strokeStyle = "pink";
                context.font = "50px serif";
                context.strokeText(text, 300, 400);

                //擦除Canvas
                //context.clearRect(0, 0, canvas.width(), canvas.height());

                //寬度/高度技巧
                context.fillStyle = "yellow";
                //重設置canvas高度寬度將完全重置canvas上所有內容為初始狀態
                canvas.attr("width", canvas.width());
                canvas.attr("height", canvas.height());
                //將繪製黑色矩形
                context.fillRect(40, 40, 100, 100);
            });
        </script>
    </head>
    <body>
        <!-- 創建一個canvas元素 -->
        <canvas id="myCanvas" width="700" height="500"></canvas>
    </body>
</html>