记录12 canvas元素

作者: suhuanzhen | 来源:发表于2017-01-08 16:09 被阅读0次

记录12 canvas元素
canvas-09 图像源相关
canvas
canvas基本操作
canvas基础部分
HTML5初级知识总结
canvas 的基本用法
Unity-UI（UGUI详解）01基础概念、自动布局、动画集成
2020-06-22-Canvas笔记01-Canvas元素
HTML5 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

记录12 canvas元素
可以将 canvas元素当作是一块空白的画布或者一页纸。可以将任何想要的内容(例如,直线、形状和文本)绘制于其上。...
canvas-09 图像源相关
常用图像源：图像元素：img 视频元素video canvas:canvas...
canvas
canvas canvas绘制获取元素var canvas = document.getelementbyid(...
canvas基本操作
创建canvas元素，使用id获取canvas元素;var c = document.getElementByI...
canvas基础部分
一、canvas的绘图表面 canvas有两种尺寸 canvas元素自身元素的尺寸 canvas绘图表面的尺寸如...
HTML5初级知识总结
1.canvas绘制步骤添加canvas元素，定义id和范围 js里获取canvas元素通过getConte...
canvas 的基本用法
一、
Unity-UI（UGUI详解）01基础概念、自动布局、动画集成
Canvas Canvas应该包含全部UI元素，全部的UI元素应该时Canvas的子物体调整元素的显示顺序可以从H...
2020-06-22-Canvas笔记01-Canvas元素
canvas元素的大小与绘图表面的大小 Canvas元素默认大小浏览器所创建的canvas元素，默认尺寸是 300...
HTML5 Canvas
canvas元素用于网页上绘制图形。什么事Canvas？ HTML5的canvas元素使用JavaScript在...