HTML5画布（canvas）

最新推荐文章于 2024-07-20 22:13:44 发布
最新推荐文章于 2024-07-20 22:13:44 发布
阅读量2.9k 收藏 39
点赞数 8
分类专栏： 前端基础 文章标签： canvas html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zg0601/article/details/120985093
版权

目录

一、简介

二、使用画布

四、绘制简单图形

1、绘制线段

2、绘制三角形

3、绘制矩形

4、绘制圆

5、绘制弧线

五、简单实例（一个火柴人）

一、简介

使用canvas可以在网页上绘制图形、文字、图片等。

二、使用画布

1、创建画布（矩形区域的画布）：<canvas></canvas>

<canvas id="画布名称" width="数值" height="数值">

您的浏览器不支持canvas  /*当浏览器不支持<canvas>时显示*/

</canvas>

ps：canvas本身不具有绘制功能，可以通过JavaScript操作绘制图形的API进行绘制操作。

要想在JavaScript中控制画布，首先要获取画布。使用getElementById()方法可以获取网页中的画布对象。

var canvas = document.getElementById('[画布名称]');

2、准备画笔（获取上下文对象）：canvas.getContext(“2d”);

画笔就是context对象，context对象也被称为绘制环境，通过该对象，可以在画布中绘制图形。

canvas.getContext('2d');

ps：在JavaScript中，通常会定义一个变量来保存获取的context对象。

var context = canvas.getContext('2d');

3、开始路径规划：context.beginPath();

一条最简单的线由三部分组成，分别为初始位置、连线端点以及描边，我们需要根据坐标（如下）规划路径。

在平面（即2D）中，在画布中从最左上角的坐标原点（0,0）开始，x轴向右增大，y轴向下增大。

4、移动起始点：context.moveTo(x,y);

我们确定的起始点就是基于上面规划路径时用到的坐标，这个起始点就是我们画图时的下笔位置。

5、绘制线（矩形，圆形，图片…）:context.lineTo(x,y)

连线端点用于定义一个端点，并绘制一条从该端点到初始位置的连线。在画布中使用lineTo(x,y)方法来定义连线端点。

6、闭合路径：context.closePath();

绘制直线确定了起始点和线头点后，便形成了一条绘制路径，如果复杂路径绘制，必须使用路径开始和结束。

context.beginPath();//开始路径

context.closePath();//结束路径

7、绘制描边：context.stroke();

通过初始位置和连线端点可以绘制一条线，但这条线并不能被看到。这时我们需要为线添加描边，让线变得可见。使用画布中的stroke()方法，可以实现线的可视效果。

四、绘制简单图形

1、绘制线段

代码如下（两根线段）：

<body>

    <canvas id="cas" width="200" height="200"></canvas>

    <script type="text/javascript">

        //①获取画布

        var cas = document.getElementById('cas');

        //②获取画笔

        var ctx = cas.getContext('2d');

        //③确定起始点

        ctx.moveTo(10,10);

        // ctx.lineCap = 'round';

        ctx.lineCap = 'square';          //线条端点形状

        //④确定连接端点（终点）

        ctx.lineTo(150,10);

        ctx.lineWidth = '10';

        //⑤描边

        ctx.strokeStyle = '#f66';      //描边的颜色

        ctx.stroke();

        ctx.beginPath();             //重置路径

        ctx.moveTo(10,100);

        ctx.lineTo(300,100);

        ctx.stroke();

        ctx.closePath();          //闭合路径

    </script>

</body>

浏览器效果如下：

2、绘制三角形

代码如下：

<body>

    <canvas id="cas" width="500" height="500"></canvas>

    <script type="text/javascript">

        var cas = document.getElementById('cas');

        var ctx = cas.getContext('2d');

        ctx.lineWidth = '10';

        ctx.strokeStyle = '#f3a';      //描边的颜色

        ctx.beginPath();           //开始路径

        ctx.moveTo(10,10);         //确定起点

        ctx.lineTo(10,150);      

        ctx.lineTo(150,150);       //确定终点

        ctx.closePath();          //闭合路径（结束路径）（闭合起点和终点）

        ctx.stroke();

        ctx.fillStyle = 'lightblue';

        ctx.fill();

    </script>

</body>

浏览器效果如下：

3、绘制矩形

代码如下：

<body>

    <canvas id="cas" width="500" height="500"></canvas>

    <script type="text/javascript">

        var cas = document.getElementById('cas');

        var ctx = cas.getContext('2d');

        ctx.lineWidth = '10';

        ctx.strokeStyle = '#f3a';      //描边的颜色

        ctx.beginPath();           //开始路径

        ctx.moveTo(10,300);         //确定起点

        ctx.lineTo(10,450);         //设置坐标时要考虑到画布的大小

        // ctx.lineTo(300,450);  

        ctx.lineTo(160,450);      

        ctx.lineTo(160,300);       //确定终点

        ctx.closePath();          //闭合路径（结束路径）（闭合起点和终点）

        ctx.stroke();

        ctx.fillStyle = '#ff6';

        ctx.fill();

    </script>

</body>

浏览器效果如下：

4、绘制圆

用arc()绘制圆的原理图：

代码如下：

<body>

    <canvas id="cas" width="500" height="500">

        您的浏览器不支持画布

    </canvas>

    <script type="text/javascript">

        var ctx = document.getElementById('cas').getContext('2d');

        ctx.beginPath();

        ctx.arc(200,200,100,0,2*Math.PI,true);

// arc(x,y,r,开始角,结束角,是否逆时针方向)

        ctx.closePath();

        ctx.fillStyle = '#f3a';

        ctx.fill();

    </script>

</body>

浏览器效果如下：

5、绘制弧线

代码如下：

<body>

    <canvas id="cas" width="500" height="500">

        您的浏览器不支持画布

    </canvas>

    <script type="text/javascript">

        var ctx = document.getElementById('cas').getContext('2d');

        ctx.beginPath();

        ctx.strokeStyle = 'blue';

        ctx.lineWidth = 5;

        ctx.arc(160,230,50,Math.PI/6,5*Math.PI/6,false);

        // false代表顺时针方向

        ctx.stroke();

        ctx.beginPath();

        ctx.strokeStyle = 'fff';

        ctx.lineWidth = 5;

        ctx.arc(160,180,40,Math.PI/400,5*Math.PI/1,true);

        // true代表逆时针方向

        ctx.stroke();

    </script>

</body>

浏览器效果如下：

五、简单实例（一个火柴人）

代码如下：

<body>

    <canvas id="cas" width="800" height="800">

        您的浏览器不支持画布

    </canvas>

    <script type="text/javascript">

        var ctx = document.getElementById('cas').getContext('2d');

        //头部

        ctx.beginPath();

        ctx.strokeStyle = 'black';

        ctx.lineWidth = 5;

        ctx.arc(400,100,30,0,2*Math.PI,true);

        ctx.stroke();

        //脖子

        ctx.beginPath();

        ctx.moveTo(397.5,130);

        ctx.lineTo(397.5,140);

        ctx.lineTo(402.5,140);

        ctx.lineTo(402.5,130);

        ctx.closePath();

        ctx.fillStyle = 'black';

        ctx.fill();

        //身体

        ctx.beginPath();

        ctx.moveTo(387.5,140);

        ctx.lineTo(387.5,260);

        ctx.lineTo(412.5,260);

        ctx.lineTo(412.5,140);

        ctx.closePath();

        ctx.fillStyle = 'black';

        ctx.fill();

        //手臂1

        ctx.beginPath();

        ctx.moveTo(397,143);

        ctx.lineTo(404,137);

        ctx.lineTo(450,200);

        ctx.lineTo(443,205);

        ctx.closePath();

        ctx.fillStyle = 'black';

        ctx.fill();

        //包

        ctx.lineWidth = '4';

        ctx.strokeStyle = 'black';

        ctx.beginPath();

        ctx.moveTo(360,200);

        ctx.lineTo(360,250);

        ctx.lineTo(440,250);

        ctx.lineTo(440,200);

        ctx.closePath();

        ctx.stroke();

        ctx.fillStyle = 'red';

        ctx.fill();

        //手臂2

        ctx.beginPath();

        ctx.moveTo(450,200);

        ctx.lineTo(443,196.5);

        ctx.lineTo(397,237);

        ctx.lineTo(403,241.5);

        ctx.closePath();

        ctx.fillStyle = 'black';

        ctx.fill();

        //手

        ctx.beginPath();

        ctx.arc(400,240,10,0,2*Math.PI,true);

        ctx.fillStyle = 'black';

        ctx.fill();

        //左腿

        ctx.beginPath();

        ctx.moveTo(395.5,260);

        ctx.lineTo(404.5,260);

        ctx.lineTo(385,400);

        ctx.lineTo(376,400);

        ctx.closePath();

        ctx.fillStyle = 'black';

        ctx.fill();

        //右腿

        ctx.beginPath();

        ctx.moveTo(395.5,260);

        ctx.lineTo(404.5,260);

        ctx.lineTo(428,400);

        ctx.lineTo(419,400);

        ctx.closePath();

        ctx.fillStyle = 'black';

        ctx.fill();

        //左脚

        ctx.beginPath();

        ctx.strokeStyle = 'blcak';

        ctx.lineWidth = 5;

        ctx.arc(367,400,15,Math.PI/400,5*Math.PI/1,true);

        ctx.closePath();

        ctx.stroke();

        //右脚

        ctx.beginPath();

        ctx.strokeStyle = 'black';

        ctx.lineWidth = 5;

        ctx.arc(410,400,15,Math.PI/400,5*Math.PI/1,true);

        ctx.closePath();

        ctx.stroke();

    </script>

</body>

浏览器效果如下：

非早起选手
关注
  • 8
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 —— canvas画布
impact_factor的博客
07-22 1020
canvas画布 画布：HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 绘制图形的过程 创建画布：使用html5中画布标签 <canvas id="id" width="宽度" height="高度"> </canvas> JavaScript中获取画布 document.getElementById('id')
关于HTML5画布canvas的功能
lmrylll的博客
04-28 1853
/规定渐变的起始坐标。使用渐变，设置fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线。//以画布坐标（10，10）为开始，将图片放置画布上。Var c=document.getElementByID(“myCanvas”)//得到画布。渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
HTML5画布Canvas
lmrylll的博客
04-26 1296
①、fillStyle属性 ： 可以是CSS颜色、渐变、图案等②、font ： 定义字体①、fillRect（x, y, width, height）: 定义矩形的填充方式②、fillText（text, x, y）： 在canvas绘制文本③、drawImage（image, x, y）: 图像画到画布上。
2024年最全html画布canvas标签的使用(附赠three(1)，最新BAT大厂面试者整理的HarmonyOS鸿蒙面试题目
2401_84872617的博客
05-14 327
URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。闭合路径就是将我们绘制的开放路径，进行封闭处理，多点的路径闭合后会形成特定的形状。使用画布中的strokeStyle属性可以定义线的描边颜色，该属性的取值为十六进制颜色值或颜色英文。使用画布中的lineWidth属性可以定义线的宽度，该属性的取值为数值（不带单位），以像素为计量。默认情况下，线的端点是方形的，通过画布中的lineCap属性可以改变端点的形状。
HTML5 画布 Canvas
笨鸟
09-27 1397
利用html5的canvas元素使用 JavaScript 在网页上绘制图像。 通过规定尺寸、颜色和位置，来绘制一个圆： Your browser does not support the canvers element. var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.
粒子特效html代码scdn,小教程：HTML5画布Canvas绘制生成各种粒子物理动态效果
weixin_36179933的博客
06-05 940
目录：1. 绘制静态粒子图形效果2. 添加静态粒子动画效果3. 添加粒子碰撞动画效果4. 添加粒子四面碰撞效果基础要求：1. 了解基础HTML标签，例如canvas标签2. 了解Javascript的基础知识第一步： 生成静态粒子图形生成静态粒子图形，我们将会使用到Canvas的如下相关方法：context.fillRect(x, y, width, height);context.arc(x, ...
HTML5 Canvas画布
lllllllllaaa的博客
08-27 1012
7HTML5 Canvas画布 1、       Canvas:定义画布的大小是style的属性，而定义画布的像素是Canvas的属性 如果设置Style里面的width和height他仅表示canvas元素占文档流的位置，这时候画布的宽度 和高度是默认值，分别是600、300. 注意：设置canvas的宽度的，直接操作canvas的width属性和height属性。如果要放大canvas画
HTML5画布(canvas)绘制图形
m0_61843988的博客
07-15 4467
canvas 元素用于在网页上绘制图形 canvas 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。 默认情况下它在网页上是一块空白区域，默认大小300*150 注意：canvas画布默认背景色为透明色，可以自行定义背景色...
HTML5(canvas)画布绘制图形
weixin_56393766的博客
07-15 1091
canvas(画布)的基本用法和自我总结
HTML5 画布canvas使用方法
09-28
主要介绍了HTML5 画布canvas使用方法，canvas 是一个矩形区域，可以控制其每一像素，介绍了canvas的多种功能，感兴趣的小伙伴们可以参考一下
HTML5 Canvas画布源码
05-16
这个“HTML5 Canvas画布源码”项目显然利用了Canvas的这一特性，构建了一个功能丰富的在线画板应用。这个应用具备了画笔、线宽调节、颜色选择、橡皮擦、文本框、图片上传以及保存等功能，非常适合教师进行在线教学时...
html5 画布例子
02-06
这个“html5 canvas画布例子”是一个连线游戏，它利用了Canvas API来创建交互式的游戏体验。下面我们将深入探讨HTML5 Canvas的基本概念、API以及在这个连线游戏中可能涉及的技术点。 首先，HTML5 Canvas是一个基于...
html5——CSS列表样式属性
jiuyuexixi的博客
07-16 243
html5——CSS列表样式属性
HTML5应用的安全防护策略与实践
@云安全小杜
07-17 413
随着HTML5及其相关技术（如CSS3和JavaScript）的普及，Web应用变得越来越强大和复杂，同时也成为黑客攻击的目标。本文将探讨HTML5应用面临的常见安全威胁，以及如何通过最佳实践和代码示例来增强应用的安全性。
HTML5-canvas1
最新发布
Violetto_Yan的博客
07-20 190
context.beginPath（）之后会用指定新的状态回值。最后一次会把前面的覆盖掉。把图形包在beginPath（）和closePath（）里面。若分别context.strokeStyle=“ ”fillRect()用fillstyle绘制填充矩形。最后一个lineto可以省略 ，会自动连接。strokeRect() 用 绘制矩形边框。4、后绘制的图形会遮挡前面的图形。1、canvas：创建画布。3、canvas自带api。绘制封闭图形 有空隙。
wx470校园保修系统小程序-springboot+vue+uniapp.zip（可运行源码+sql文件+文档）
07-20
基于web的校园报修系统使用Java语言进行编码，使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务，总之，基于web的校园报修系统集中管理信息，有着保密性强，效率高，存储空间大，成本低等诸多优点。它可以降低信息管理成本，实现信息管理计算机化。 学生信息管理页面，此页面提供给管理员的功能有：学生信息的查询管理，可以删除学生信息、修改学生信息、新增学生信息，还进行了对用户名称的模糊查询的条件。维修人员管理页面，此页面提供给管理员的功能有：查看已发布的维修人员数据，修改维修人员，维修人员作废，即可删除，还进行了对维修人员名称的模糊查询 维修人员信息的类型查询等等一些条件。故障上报管理页面，此页面提供给管理员的功能有：根据故障上报进行条件查询，还可以对故障上报进行新增、修改、查询操作等等。论坛信息管理页面，此页面提供给管理员的功能有：根据论坛信息进行新增、修改、查询操作等等。
wx447火锅店点餐系统-ssm+vue+uniapp.zip（可运行源码+sql文件+文档）
07-20
本火锅店点餐系统采用Java语言和Vue技术，框架采用SSM，搭配Mysql数据库，运行在Idea里，采用小程序模式。本火锅店点餐系统提供管理员、用户两种角色的服务。总的功能包括菜品的查询、菜品的购买、餐桌预定和订单管理。本系统可以帮助管理员更新菜品信息和管理订单信息，帮助用户实现在线的点餐方式，并可以实现餐桌预定。本系统采用成熟技术开发可以完成点餐管理的相关工作。 本系统的功能围绕用户、管理员两种权限设计。根据不同权限的不同需求设计出更符合用户要求的功能。本系统中管理员主要负责审核管理用户，发布分享新的菜品，审核用户的订餐信息和餐桌预定信息等，用户可以对需要的菜品进行购买、预定餐桌等。用户可以管理个人资料、查询菜品、在线点餐和预定餐桌、管理订单等，用户的个人资料是由管理员添加用户资料时产生，用户的订单内容由用户在购买菜品时产生，用户预定信息由用户在预定餐桌操作时产生。 本系统的功能设计为管理员、用户两部分。管理员为菜品管理、菜品分类管理、用户管理、订单管理等，用户的功能为查询菜品，在线点餐、预定餐桌、管理个人信息等。 管理员负责用户信息的删除和管理，用户的姓名和手机号都可以由管理员在此功能里看到。管理员可以对菜品的信息进行管理、审核。本功能可以实现菜品的定时更新和审核管理。本功能包括查询餐桌，也可以发布新的餐桌信息。管理员可以查询已预定的餐桌，并进行审核。管理员可以管理公告和系统的轮播图，可以安排活动。管理员可以对个人的资料进行修改和管理，管理员还可以在本功能里修改密码。管理员可以查询用户的订单，并完成菜品的安排。 当用户登录进系统后可以修改自己的资料，可以使自己信息的保持正确性。还可以修改密码。用户可以浏览所有的菜品，可以查看详细的菜品内容，也可以进行菜品的点餐。在本功能里用户可以进行点餐。用户可以浏览没有预定出去的餐桌，选择合适的餐桌可以进行预定。用户可以管理购物车里的菜品。用户可以管理自己的订单，在订单管理界面里也可以进行查询操作。
html5 移动画布,HTML5画布 canvas移动
05-20
HTML5画布(canvas)可以通过JavaScript实现移动效果。移动画布可以让我们在画布上绘制动态的图形和动画。下面是一个简单的示例代码，演示如何移动画布： ``` // 获取canvas元素和上下文 var canvas = document....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值