Canvas基础1-绘制基本图形和线条

最新推荐文章于 2024-04-08 20:58:26 发布

hf188680

最新推荐文章于 2024-04-08 20:58:26 发布

阅读量1k

点赞数

分类专栏： Canvas 文章标签： Canvas

本文链接：https://blog.csdn.net/justdoitflyer/article/details/8877150

版权

Canvas 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Canvas Demo</title>
    <script src="../jquery-1.9.1.js"></script>
    <script>
        $(document).ready(function(){
            var canvas = $("#myCanvas");
            var context = canvas.get(0).getContext("2d");

            //画线
            context.strokeStyle = "rgb(20,100,200)";
            context.beginPath();
            context.moveTo(20,20);
            context.lineTo(80,80);
            context.closePath();
            context.stroke();

            //画半圆
            context.fillStyle = "#990000";
            context.beginPath();
            context.arc(50,80,30,0,Math.PI,false);
            context.closePath();
            context.fill();

            //画空心矩形
            context.strokeStyle = "rgb(255,0,0)";
            context.strokeRect(80,80,80,100);

            //画圆
            context.fillStyle = "rgb(0,255,0)";
            context.beginPath();
            context.arc(160,200,20,0,Math.PI*2,false);
            context.closePath();
            context.fill();

            //画实心矩形
            context.fillStyle = "rgb(0,0,255)";
            context.fillRect(160,220,80,100);

            //画实心圆弧
            context.fillStyle = "#990000";
            context.beginPath();
            context.arc(240,290,30,0,Math.PI*0.5,false);
            context.closePath();
            context.fill();

            //绘制文字
            var text1 = "Hello World!";
            var text2 = " Hello Canvas!";
            context.font = "italic 20px serif";       //修改字号和字体,italic是斜体
            context.fillText(text1,60,40);
            context.font = "20px serif";       //修改字号和字体
            context.fillText(text2,160,65);
        });
    </script>
    <style type="text/css">
        #myCanvas{
            border: 2px solid #ff22ff;
        }
    </style>
</head>

<body>
<canvas id="myCanvas" height="350" width="350">
    <!--code?-->
</canvas>
</body>

</html>

PS:
简单意思一下，东西当然远不止这些！
用canvas画线或其他图形时要注意的一个细节是：创建一个2D渲染上下文时，必须要getContext("2d");之前有.get(0).  
为什么？
因为必须强调一点，由于我们使用了JQuery，所以需要调用get方法才能访问DOM中的canvas元素，然后才能够访问Canvas的getContext方法。
需记住：get方法本身与Canvas之间没有任何关系。

知识点补充:
修改颜色用xxxStyle属性（xxx可能是fill 或 stroke等）
修改线条宽度用lineWidth属性