记录12 canvas元素

可以将 canvas元素当作是一块空白的画布或者一页纸。可以将任何想要的内容(例如,直线、形状和文本)绘制于其上。唯一的限制就是你自己的想象力。

创建一个基本的画布并绘制简单的填充图形---长方形

如下用canvas创建一个画布，并在画布上(0,0)处画一个weight为20，height为100的长方形（20像素*100像素）。
绘制环境是一个 JavaScript对 象, 包 含 了 用 于 在 画 布 上 绘 制 的 所 有 的 方法 和 属 性。 要 获 得 该 对 象, 在 canvas 上 调 用getContext,并且将字符串 "2d" 作为参数传递给它。该参数表示,我们要在画布上绘制一个二维图像。我们把这个绘制环境对象保存到变量 ctx 中。

<body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.fillRect(0,0,10,20);
    </script>
</body>

在画布上绘制多个填充图形---正方形

<body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        for(var i=0;i<8;i++){
            ctx.fillRect(i*10,i*10,10,10);
        }
    </script>
</body>

更改绘制的填充色

前面我们在绘制环境ctx下调用fillRect绘制图形默认都是黑色，我们可以更改绘制环境ctx的fillStyle更改填充色。

绘制出来的两个长方形都是红色的

<body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "Red";
        ctx.fillRect(0,0,10,20);
        ctx.fillRect(30,30,10,20);
    </script>
</body>

其他颜色名称可以查找https://css-tricks.com/snippets/css/named-colors-and-hex-equivalents/这个网站

绘制边框

fillRect 方法绘制了一个填充的矩形，只是绘制一个矩形的边框,可以使用strokeRect 方法。可以看到边框默认灰色，因为fillStyle修改的只是填充色为红色，边框的颜色不是该属性进行控制的。

<body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "Red";
        ctx.fillRect(0,0,10,20);
        ctx.strokeRect(30,30,10,20);
    </script>
</body>

使用strokeStyle修改边框色为深粉，用lineWidth设置边框的粗细。如下画出一个粉色长方形边框，边框粗为4个像素。

<body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script type="text/javascript">
        var canvas=document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.strokeStyle = "DeepPink";
        ctx.lineWidth = 4;
        ctx.strokeRect(10,10,100,20);
    </script>
</body>

绘制路径（画布上的线条也叫路径）

如下，我们绘制两个线条为一个红色的x形

<body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.strokeStyle = "Red";
        ctx.lineWidth=4;
        ctx.beginPath();   //开始绘制线条
        ctx.moveTo(10,10);  //第一个线条的起点
        ctx.lineTo(60,60);  //第一个线条的终点
        ctx.moveTo(60,10);  //第二个线条的起点
        ctx.lineTo(10,60);  //第二个线条的终点
        ctx.stroke();   //根据上面的点绘制出两个线条，没有调用该函数页面不会有线条
    </script>
</body>

效果图如下：


Paste_Image.png

红蓝线条的绘制，如下绘制每一种颜色的线条都需要一对ctx.beginPath();和ctx.stroke();作为开始和结束。

<body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.strokeStyle = "Red";
        ctx.lineWidth=4;
        ctx.beginPath();   //开始绘制线条
        ctx.moveTo(10,10);  //第一个线条的起点
        ctx.lineTo(60,60);  //第一个线条的终点
        ctx.stroke();   //绘制结束

        ctx.strokeStyle = "Blue";
        ctx.beginPath();  //开始绘制线条
        ctx.moveTo(60,10);  //第二个线条的起点
        ctx.lineTo(10,60);  //第二个线条的终点
        ctx.stroke();   //绘制结束
    </script>
</body>

效果图如下：


Paste_Image.png

填充路径

我们可以绘制出一个子弹头的路径，还可以填充该封闭路径形成的图案---就是用前面使用过的设置绘制环境的填充色。

<body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.lineWidth=4;
        ctx.strokeStyle = "Brown";
        ctx.fillStyle = "SkyBlue"
        ctx.beginPath();   //开始绘制路径
        ctx.moveTo(100,100);  //第一个线条的起点
        ctx.lineTo(100,60);  //第一个线条的第2个点
        ctx.lineTo(130,30);  //第一个线条的第3个点
        ctx.lineTo(160,60);  //第一个线条的第4个点
        ctx.lineTo(160,100);  //第一个线条的第5个点
        ctx.lineTo(100,100);  //第一个线条的第6个点
        ctx.stroke();   //绘制结束
        ctx.fill();
    </script>
</body>

效果图如下：


Paste_Image.png

如果路径不是一个封闭图形，使用填充色进行填充则会把第一个点和最后一个点当成封闭图形的最后一条路径进行填充，如下：

<body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.lineWidth=4;
        ctx.strokeStyle = "Brown";
        ctx.fillStyle = "SkyBlue"
        ctx.beginPath();   //开始绘制路径
        ctx.moveTo(100,100);  //第一个线条的起点
        ctx.lineTo(100,60);  //第一个线条的第2个点
        ctx.lineTo(130,30);  //第一个线条的第3个点
        ctx.lineTo(160,60);  //第一个线条的第4个点
        // ctx.lineTo(160,100);  //第一个线条的第5个点
        // ctx.lineTo(100,100);  //第一个线条的第6个点
        ctx.stroke();   //绘制结束
        ctx.fill();
    </script>
</body>

效果图如下：


Paste_Image.png

绘制圆弧和圆

使用arc方法绘制圆弧和圆，第6个参数为false表示顺时针开始绘制，为true表示逆时针开始绘制。
用例子来讲解就是ctx.arc(50,50,20,0,Math.PI/2,false);就是以圆心（50，50），半径为20的圆，起始角度为0（默认从最右侧开始为起始角度0），顺时针绘制到结束角度Math.PI/2。

<body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.lineWidth=4;
        ctx.strokeStyle = "Brown";
        
        ctx.beginPath();   //开始绘制路径
        ctx.arc(50,50,20,0,Math.PI/2,false);
        ctx.stroke();

        ctx.beginPath(); 
        ctx.arc(100,50,20,0,Math.PI,false);
        ctx.stroke();

        ctx.beginPath(); 
        ctx.arc(150,50,20,0,Math.PI*2,false);
        ctx.stroke();   //绘制结束
    </script>
</body>

效果图如下：


Paste_Image.png

我们每个圆弧都要一对ctx.beginPath();和ctx.stroke();作为开始和结束

<body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.lineWidth=4;
        ctx.strokeStyle = "Brown";

        ctx.beginPath();   //开始绘制路径
        ctx.arc(50,50,20,0,Math.PI/2,false);
        ctx.arc(100,50,20,0,Math.PI,false);
        ctx.arc(150,50,20,0,Math.PI*2,false);
        ctx.stroke();   //绘制结束
    </script>
</body>

否则效果图如下,第一个图形的终点A会去链接第二个图形的起点B（然后从起点B开始绘制圆弧），第二个图形的终点又会去连接第三个图形的起点C（绘制圆弧时是从圆最右侧的点为起点顺时针开始画）：


Paste_Image.png

注意：逆时针绘制圆弧，起始角度为0逆时针绘制到结束角度Math.PI/2，刚好是3/4个圆，与顺时针相反。（因为起始角度是以顺时针来计算的，所以逆时针要画到那个位置就得绕3/4个圆）

<body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.lineWidth=4;
        ctx.strokeStyle = "Brown";
        
        ctx.beginPath();   //开始绘制路径
        ctx.arc(50,50,20,0,Math.PI/2,true);
        ctx.stroke();

    </script>
</body>

效果图如下


用函数绘制多个圆

如果只是想要绘制完整的圆，arc 方法有点复杂。一来是顺时针还是逆时针无关紧要。二来在调用arc 方法之前和之后，总是需要调用ctx. beginPath 和 ctx.stroke 方法太麻烦。我们可以编写一个函数来绘制圆，从而忽略这些 细节，所必需提供的只有 x、y 和 radius 参数（圆心坐标和半径---圆的大小）。

1，绘制函数如getContext只能在画布环境也就是<canvas>标签里面有效，所以我们创建一个600*600的画布，超出画布的部分不会显示出来。
2，在画布里面点击任意地方，会以点击的点为圆心绘制一个随机颜色和随机半径的圆。

<!DOCTYPE html>
<html>
<head>
    <title>Learn</title>
</head>
<body>
    <canvas id="canvas" width="600" height="600"></canvas>>
    <script type="text/javascript" src="jquery-3.1.1.js"></script>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.lineWidth = 4;
        var colors = ["Red","Orange","Yellow","Green","Blue","Purple"];
        var radius = ["10","20","30","40","50","60"];
        var circle = function (x,y,radius){
            ctx.beginPath();
            ctx.arc(x,y,radius,0,Math.PI*2,false);
            ctx.stroke();
        };
        var clickHandler=function(event){
            ctx.strokeStyle=colors[Math.floor(Math.random()*6)];
            circle(event.pageX,event.pageY,radius[Math.floor(Math.random()*6)])
        }
        $("#canvas").click(clickHandler);
    </script>
</body>
</html>

效果图如下：


Paste_Image.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • canvas笔记
    一：canvas简介 1.1什么是canvas？ ①：canvas是HTML5提供的一种新标签 ②：HTML5 ...
    GreenHand1阅读 4,724评论 2赞 32
  • canvas如何制作基础图形？
    啥是canvas？ HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）。不过， 元素本身...
    kiaizi阅读 796评论 0赞 4
  • 本福特定律
    解释 数字的变化快慢往往基于自身的大小。同样的位数，比如5位，10000到20000 和 80000到90000 ...
    VanCare阅读 1,496评论 0赞 0
  • 晴好的周末
    这个周末两天的天气都非常给力，阳光灿烂，蓝天明净。铁腕治霾初显成效，为西安市新领导班子打call。 周末上了乐高课...
    简记微语阅读 135评论 0赞 0
  • 好好说话，没人理应消化你的坏脾气🌻
    2017年12月10日，星期日，好天气 早上6点45分起，洗漱洗头吃早餐，然后叫滴滴。然后让他等了我126秒。 上...
    贺琴说阅读 288评论 0赞 0