Canvas绘制形状

最新推荐文章于 2021-04-19 15:33:08 发布
最新推荐文章于 2021-04-19 15:33:08 发布
阅读量299 收藏
点赞数
文章标签： canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44966759/article/details/108735385
版权

绘制形状

画布坐标

img

<canvas>元素有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
12
绘制矩形

fillRect(x, y, width, height)

fillRect()方法绘制一个填充的矩形

  • x
    • 矩形起始点的 x 轴坐标
  • y
    • 矩形起始点的 y 轴坐标
  • width
    • 矩形的宽度
  • height
    • 矩形的高度

img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function draw() {
            var canvas = document.getElementById("canvas");
            if (canvas.getContext) {
                var ctx = canvas.getContext("2d");

                ctx.fillStyle = "rgb(200,0,0)";
                ctx.fillRect (100, 50, 100, 100);
            }
        }
    </script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>

img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function draw() {
            var canvas = document.getElementById("canvas");
            if (canvas.getContext) {
                var ctx = canvas.getContext("2d");

                ctx.fillStyle = "rgb(200,0,0)";
                ctx.fillRect (0, 0, 100, 100);
            }
        }
    </script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>

strokeRect(x, y, width, height)

strokeRect()方法绘制一个描边矩形，其起点为(x, y) ，其大小由宽度和高度指定

  • x
    • 矩形起点的 x 轴坐标。
  • y
    • 矩形起点的 y 轴坐标。
  • width
    • 矩形的宽度。正值在右侧，负值在左侧。
  • height
    • 矩形的高度。正值在下，负值在上。

img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function draw() {
            var canvas = document.getElementById("canvas");
            if (canvas.getContext) {
                var ctx = canvas.getContext("2d");
                //颜色
                ctx.fillStyle = "rgb(200,0,0)";
                //矩形
                ctx.fillRect (0, 0, 180, 180);
                //描边
                ctx.strokeRect(50, 50, 45, 45);
            }
        }
    </script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>

clearRect(x, y, width, height)

clearRect()方法清除指定矩形区域，让清除部分完全透明。

  • x
    • 矩形起始点的 x 轴坐标
  • y
    • 矩形起始点的 y 轴坐标
  • width
    • 矩形的宽度
  • height
    • 矩形的高度

img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function draw() {
            var canvas = document.getElementById("canvas");
            if (canvas.getContext) {
                var ctx = canvas.getContext("2d");
                //颜色
                ctx.fillStyle = "rgb(200,0,0)";
                //矩形
                ctx.fillRect (0, 0, 100, 100);
                //透明
                ctx.clearRect(50, 50, 100, 100);
            }
        }
    </script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>

img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function draw() {
            var canvas = document.getElementById("canvas");
            if (canvas.getContext) {
                var ctx = canvas.getContext("2d");
                //颜色
                ctx.fillStyle = "rgb(200,0,0)";
                //矩形
                ctx.fillRect (0, 0, 180, 180);
                //透明
                ctx.clearRect(50, 50, 45, 45);
            }
        }
    </script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
绘制路径
  1. 首先，你需要创建路径起始点。
  2. 然后你使用画图命令去画出路径。
  3. 之后你把路径封闭。
  4. 一旦路径生成，你就能通过描边或填充路径区域来渲染图形

生成路径的第一步叫做beginPath()。本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径（线、弧形、等等）构成图形。而每次这个方法调用之后，列表清空重置，然后我们就可以重新绘制新的图形。

注意：当前路径为空，即调用beginPath()之后，或者canvas刚建的时候，第一条路径构造命令通常被视为是moveTo（），无论实际上是什么。出于这个原因，你几乎总是要在设置路径之后专门指定你的起始位置。

第二步就是调用函数指定绘制路径。

第三，就是闭合路径closePath(),不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做。

注意：当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合

方法描述
fill()填充当前绘图（路径)
stroke()绘制已定义的路径
beginPath()起始—条路径，或重置当前路径
moveTo()把路径移动到画布中的指定点，不创建线条
closePath()创建从当前点回到起始点的路径
lineTo()添加一个新点，然后在画布中创建从该点到最后指定点的线条
clip()从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo()创建二次贝塞尔曲线
bezierCurveTo(创建三次方贝塞尔曲线
arc()创建弧/曲线（用于创建圆形或部分圆)
arcTo()创建两切线之间的弧/曲线
isPointInPath()如果指定的点位于当前路径中，则返回true，否则返回false

img

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function draw() {
            var canvas = document.getElementById('canvas');
            if (canvas.getContext) {
                var ctx = canvas.getContext('2d');

                ctx.beginPath();
                ctx.moveTo(75, 50);
                ctx.lineTo(100, 75);
                ctx.lineTo(100, 25);
                ctx.fill();
            }
        }
    </script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
圆弧

arc(x, y, radius, startAngle, endAngle, anticlockwise)

画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成

注意：arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式: 弧度=(Math.PI/180)*角度

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function draw() {
            var canvas = document.getElementById('canvas');
            if (canvas.getContext){
                var ctx = canvas.getContext('2d');

                for(var i = 0; i < 4; i++){
                    for(var j = 0; j < 3; j++){
                        ctx.beginPath();
                        var x = 25 + j * 50; // x 坐标值
                        var y = 25 + i * 50; // y 坐标值
                        var radius = 20; // 圆弧半径
                        var startAngle = 0; // 开始点
                        var endAngle = Math.PI + (Math.PI * j) / 2; // 结束点
                        var anticlockwise = i % 2 == 0 ? false : true; // 顺时针或逆时针

                        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

                        if (i>1){
                            ctx.fill();
                        } else {
                            ctx.stroke();
                        }
                    }
                }
            }
        }
    </script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>

移动笔

该功能是一个会成为上述路径列表的一部分moveTo()您可能最能想到的是将笔或铅笔从一张纸上的一个位置提起，然后放在另一张纸上。

moveTo(x, y)

移动笔由指定的坐标x和y。

初始化或beginPath()调用画布时，通常将需要使用该moveTo()函数将起点放置在其他位置。我们还可以moveTo()用来绘制未连接的路径。看看下面的笑脸。


  
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
   
</head>

<body onload="draw();">
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
 <script type="application/javascript">
function draw() {
    var canvas = document.getElementById('canvas');
    if (canvas.getContext) {
       var ctx = canvas.getContext('2d');
  
      ctx.beginPath();
      ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
      ctx.moveTo(110, 75);
      ctx.arc(75, 75, 35, 0, Math.PI, false);  // Mouth (clockwise)
      ctx.moveTo(65, 65);
      ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Left eye
      ctx.moveTo(95, 65);
      ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Right eye
      ctx.stroke();
    }
  }
    </script>
</html>

运行结果：

在这里插入图片描述

线数

lineTo()方法来绘制直线

lineTo(x, y)

绘制一条从当前绘图位置到所指定的位置的线x和y。

案例：

绘制两个三角形一个实心的一个空心的


  
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
   
</head>

<body onload="draw();">
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
 <script type="application/javascript">
function draw() {
   var canvas=document.getElementById('canvas');
   if(canvas.getContext){
     var ctx=canvas.getContext('2d');
     //绘制实心的
     ctx.beginPath();
     ctx.moveTo(25,25)
     ctx.lineTo(105,25);
     ctx.lineTo(25,105);
      // 绘制实心的
     ctx.fill();

     //绘制空心的
     ctx.beginPath();
    ctx.moveTo(125, 125);
    ctx.lineTo(125, 45);
    ctx.lineTo(45, 125);
    // 连接起始点
    ctx.closePath();
    //绘制形状
    ctx.stroke();
   }
  }
    </script>
</html>

效果如下：

在这里插入图片描述

弧线

要绘制圆弧或圆，我们使用arc()或arcTo()方法。

语法：

void ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);

该arc()方法创建一个以(x, y)半径为中心的圆弧。路径从开始于，在结束于，并按照给出的方向（默认为顺时针）行进

  • 参量

    x

    圆弧中心的水平坐标

    y

    圆弧中心的垂直坐标。

    radius

    圆弧的半径。必须是积极的。

    startAngle

    从正x轴开始测量的弧度起始弧度的角度（以弧度表示）。

    endAngle

    从正x轴开始测量，弧结束的弧度角（以弧度表示）

    anticlockwise 可选的

    可选的Boolean。如果为true，则在起始角度和终止角度之间逆时针绘制圆弧。默认值为false（顺时针）。

  • 例子

    画一个完整的圆

    
  
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
   
</head>

<body onload="draw();">
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
 <script type="application/javascript">
function draw() {
    const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
  }
    </script>
</html>

    在这里插入图片描述

华惜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas绘制图形
星星有所不知
03-20 371
canvas绘制图形1. canvas默认的width:300px、height:150px。2. canvas只支持一种原生的图形绘制：矩形。2.1 canvas绘制矩形的3种方式：3. 图形的基本元素是路径。3.1 绘制路径步骤：3.2 绘制圆弧的两种方式：3.3 绘制贝塞尔曲线：4. 参考 1. canvas默认的width:300px、height:150px。 也可以通过css来设置wi...
使用HTML5 Canvas绘制 3D房间模型和人物动画特效
01-06
使用HTML5 Canvas绘制 3D房间模型和人物动画特效
设置canvas画布大小
qq_17627195的博客
01-12 1万+
canvas的绘制是以画布大小为准的。 canvas的默认画布大小为300×150。 设置canvas画布大小的方法： // 方法一 <canvas id="test" width="100px" height="100px"></canvas> //方法二：通过js实现 <canvas id="test"></canvas> <script> var canvas = document.getElementById('test'); can
HTML 5 Canvas
DeathDomain的博客
09-15 228
基本用法 <canvas>标签只有两个属性 – width 和 height,所以在低版本的浏览器是不支持的,要在浏览器中写上 : <canvas id="tutorial" width="150" height="150">浏览器版本不支持</canvas> <canvas>在没有设置宽高的时候,默认初始化为 : <canvas width='300px' height='150px'></canvas> 浏览器支持 Inter
关于Canvas画布大小问题
Keep_Doing的博客
03-04 3023
1.canvas大小默认为300X150 <canvas id="myCanvas" style=" background-color: rgb(218, 108, 108);"></canvas> <script> var canvas = document.getElementById('myCanvas') var context = canvas.getContext("2d"); context.fillRect(0, 0, 100, 1
canvas总结：绘图表面大小和元素大小
一杯清茶的博客
04-19 921
canvas总结：绘图表面大小和元素大小 1.默认大小 如果不设置canvas大小，浏览器默认的大小是300*150. 我们可以通过canvas属性设置w、h： <canvas id="canvas" width="600" height="300"></canvas> 也可以通过css设置canvas大小： #canvas { width: 800px; height: 400px; } 2.使用
canvas绘制多边形
08-31
然后，定义一个名为`draw`的函数，该函数接受四个参数：中心点的x坐标、y坐标、多边形的边数以及半径，用于绘制不同形状的多边形： ```javascript function draw(x, y, n, r) { // ... } ``` 在`draw`函数内部，...
canvas绘制动态心电图
05-08
最后，提到的"CanvasXjt"可能是示例代码的文件名，可能包含一个完整的示例，展示了如何使用Canvas绘制动态心电图的步骤。如果需要深入学习，可以研究这个文件，理解其背后的逻辑和实现细节。 总的来说，使用Canvas...
canvas 绘制圆形时钟
08-31
- `drawSecond(second)`则绘制秒针，使用不同的颜色，并考虑到秒针的长度和形状。 在实际应用中，这些函数会被调用并结合当前时间进行更新，以实现动态时钟的效果。例如，可以设置一个定时器每秒更新一次： ```...
Canvas绘制3D菱形动画特效特效代码
03-20
在Canvas上，我们可以执行一系列操作，如绘制线条、形状、图片，甚至进行动画处理。 当涉及到3D图形时，Canvas本身并不直接支持3D渲染。但是，有了像three.js这样的库，我们可以在Canvas上创建复杂的3D场景。three....
canvas绘制风场效果
03-22
部署方面，由于canvas绘制的风场效果是一个Web应用程序，因此需要将其部署到Web服务器上，例如Nginx、Apache或Tomcat。这些服务器软件可以处理HTTP请求并返回HTML、CSS和JavaScript资源，使用户能够在浏览器中访问和...
canvas
IT_Top
03-09 448
简介： 是一个可以使用脚本(通常为JavaScript)在其中绘制图形的 HTML 元素.它可以用于制作照片集或者制作简单(也不是那么简单)的动画. 右边的图片展示了一些  的应用,在这个教程后面我们将看到. 使用  元素不是非常难但你需要一些基本的HTML和JavaScript知识。 元素不被一些老的浏览器所支持，但是所有的主流浏览器的新近版本都支持。Canvas 的默认大小为300
canvas宽高设置
热门推荐
xm2by的博客
09-04 1万+
canvas宽高设置 关于canvas宽高的设置，常见的方法有三种：1、直接设置&amp;lt;canvas&amp;gt;标签的width和height属性；2、通过css样式进行设置；3、通过js设置&amp;lt;canvas&amp;gt;标签的width和height属性。方法1和3是最有效的设置canvas宽高的方法，它会让canvas元素在页面中占据的宽高与画布的实际宽高一致；尽量避免使用方法2（通过css...
使用 canvas 获取的图片默认 300*150 无法修改
zgzga的博客
06-04 1070
问题：在使用 tracking.js 人脸识别的时候，点击拍照 canvas.drawImage 获取到的图像是300*150 无法修改 我的代码： // 默认 canvas 宽高是 300*150 <canvas id ="canvas" style="width:300px;height:300px;"></canvas> 像这种在 style中设置的宽高都是不生效的 正确写法： <canvas id="canvas" width="300" height="300" &
canvas元素大小与绘图表面大小的关系
weixin_34290631的博客
09-11 1142
1 默认大小 如果不设置canvas大小，浏览器默认的大小事是200*150px。我们可以通过canvas属性设置width(宽)’、height(高)设置其大小，如下所示： <canvas id="canvas" width="600" height="300"></canvas> 复制代码也可以使用css设置canvas大小如下： #canvas { ...
canvas设置大小
n602655099的专栏
06-15 1万+
canvas元素实际上有两套尺寸，一个是元素本身的大小，还有一个就是元素绘图表明的大小， 设置canvas的width和height属性，实际上是同时修改了它的元素本身的大小以及元素绘图表面的大小， 默认情况下canvas元素于其绘图表面都是300*150， canvas{ /*width: 600px;*/ /*height: 300px;*/
canvas画布
傻瓜的博客
07-02 1192
Linux常用命令列出目录内容ls -a：显示所有文件（包括隐藏文件）；ls -l：显示详细信息；ls -R：递归显示子目录结构；ls -ld：显示目录和链接信息；ctrl+r：历史记录中所搜命令（输入命令中的任意一个字符）；Linux中以.开头的文件是隐藏文件；pwd:显示当前目录 查看文件的类型file:查看文件的类型复制文件目录cp：复制文件和目录 cp源文件（文件夹）目标文件（文件夹）常用
Visio绘制的Tanh激活函数图像,可导出高清图片，可修改，无水印 方便用于小论文写作，方便用于毕业设计
最新发布
07-20
Visio绘制的Tanh激活函数图像,可导出高清图片，可修改，无水印。 方便用于小论文写作，方便用于毕业设计。 Visio版本为2021版，可用更高版本打开。 Visio绘制的Tanh激活函数图像,可导出高清图片，可修改，无水印。 方便用于小论文写作，方便用于毕业设计。 Visio版本为2021版，可用更高版本打开。 Visio绘制的Tanh激活函数图像,可导出高清图片，可修改，无水印。 方便用于小论文写作，方便用于毕业设计。 Visio版本为2021版，可用更高版本打开。 Visio绘制的Tanh激活函数图像,可导出高清图片，可修改，无水印。 方便用于小论文写作，方便用于毕业设计。 Visio版本为2021版，可用更高版本打开。 Visio绘制的Tanh激活函数图像,可导出高清图片，可修改，无水印。 方便用于小论文写作，方便用于毕业设计。 Visio版本为2021版，可用更高版本打开。 Visio绘制的Tanh激活函数图像,可导出高清图片，可修改，无水印。 方便用于小论文写作，方便用于毕业设计。 Visio版本为2021版，可用更高版本打开。 Visio绘制的Tanh激活函数图像,可

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值