2024年Web前端最新①万字《详解canvas api画图》小白前端入门教程（建议收藏）(1)，web前端开发零基础

最新推荐文章于 2024-05-10 10:10:22 发布
最新推荐文章于 2024-05-10 10:10:22 发布
阅读量585 收藏 26
点赞数 29
分类专栏： 程序员 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84434086/article/details/138476862
版权

对象篇

模块化编程-自研模块加载器

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  • 获取id属性值为mycanvas对象的代码如下：

<script type="text/javascript"> ``var c=document.getElementById("mycanvas"); </script>

  • 得到的对象c即为mycanvas对象。

  • 要在其中绘图还需要获得mycanvas对象的2d渲染上下文（canvasRenderingContext2D）对象：

var ctx=c.getContext(“2d”);

图片

canvas坐标系

canvas元素构建的画布，是一个基于二维(x,y)的网格。

坐标原点(0,0)位于canvas的左上角。

  • 从原点延x轴从左到右，取值依次递增。

  • 从原点延y轴从上到下，取值依次递增。

图片

图片

绘制图形：绘制直线

在网页中使用canvas元素定义一个canvas画布，用于绘画

…

使用JavaScript获取网页中的canvas对象，并获取canvas对象的2d上下文

var ctx = document.getElementById(“mycanvas”).getContext(“2d”);

调用beginPath()方法，指示开始创建路径

ctx.beginPath();

调用moveTo(x, y)方法，将坐标移至起点(x,y)

ctx.moveTo(x，y);

调用lineTo(x, y)方法，创建直线至点(x,y)的路径

ctx.lineTo(x，y);

调用stroke()方法，绘制路径

ctx.stroke();

画一条起点为(10, 10)、终点为(50, 50)的直线。

您的浏览器不支持 canvas。<script type="text/javascript"> function drawline() { var c=document.getElementById(“mycanvas”); // 获取网页中的canvas对象 var ctx=c.getContext(“2d”); //获取canvas对象的上下文（2d绘图环境） ctx.beginPath(); // 开始创建路径 ctx.moveTo(10,10); // 创建路径的起点 ctx.lineTo(50,50); // 添加路径中的一个点 ctx.stroke(); // 绘制路径 } window.addEventListener(“load”, drawline, false);//页面加载时触发drawline函数画直线``

使用连续画线的方法绘制一个三角形​​​​​​​

您的浏览器不支持 canvas。<script type="text/javascript">` `function drawtriangle(){ var c=document.getElementById(“mycanvas”); // 获取网页中的canvas对象 var ctx=c.getContext(“2d”); //获取canvas对象的2d上下文 ctx.beginPath(); // 开始创建路径 ctx.moveTo(10,10); // 将坐标移至路径起点 ctx.lineTo(10,100); // 向路径中添加一个点 ctx.lineTo(100,100); // 向路径中添加一个点 ctx.lineTo(10,10); // 向路径中添加一个点 ctx.stroke(); // 绘制路径 } window.addEventListener(“load”, drawtriangle, true);//页面加载时触发drawtriangle函数画三角形``

图片

绘制图形：绘制矩形

使用rect()方法绘制矩形路径​​​​​​​

您的浏览器不支持 canvas。<script type="text/javascript">` `function drawRect(){ var c=document.getElementById(“mycanvas”); // 获取网页中的canvas对象 var ctx=c.getContext(“2d”); //获取canvas对象的2d上下文 ctx.beginPath(); // 开始创建路径 ctx.rect(20,20, 100, 50); // 创建左上顶点为(20, 20)、长100、宽50的矩形路径 ctx.stroke(); //绘制路径 } window.addEventListener(“load”, drawRect, true); //页面加载时调用drawRect函数画矩形``

使用strokeRect()方法绘制矩形路径

  • 不需要使用beginPath()和stroke()即可绘制矩形边框

您的浏览器不支持 canvas。<script type="text/javascript">` `function drawRect(){ var c=document.getElementById(“mycanvas”); // 获取网页中的canvas对象 var ctx=c.getContext(“2d”); //获取canvas对象的2d上下文 //ctx.beginPath(); // 开始创建路径 //ctx.rect(20,20, 100, 50); // 创建左上顶点为(20, 20)、长100、宽50的矩形路径 ctx. strokeRect(20,20, 100, 50); //ctx.stroke(); //绘制路径 }` `window.addEventListener("load", drawRect, true); //页面加载时调用drawRect函数画矩形

使用fillRect()方法填充矩形

  • 不需要使用beginPath()和stroke()即可绘制矩形填充

<canvas id="mycanvas" height=500 width=500>您的浏览器不支持 canvas。</canvas>``<script type="text/javascript"> function drawRect()``{ var c=document.getElementById("mycanvas"); // 获取网页中的canvas对象 var ctx=c.getContext("2d"); //获取canvas对象的2d上下文 //ctx.beginPath(); // 开始创建路径 ctx. fillRect(20,20, 100, 50); //ctx.stroke(); //绘制路径 `` } window.addEventListener("load", drawRect, true); //页面加载时调用drawRect函数画矩形``</script>

使用clearRect()方法清除矩形​​​​​​​

<canvas id="mycanvas" height=500 width=500>您的浏览器不支持 canvas。</canvas> <script type="text/javascript"> ``function drawRect() { var c=document.getElementById("mycanvas"); // 获取网页中的canvas对象`` var ctx=c.getContext("2d"); //获取canvas对象的2d上下文 `` ctx. fillRect(20,20, 100, 50); `` ctx.clearRect(40,40, 60, 10); `` } ``window.addEventListener("load", drawRect, true); //页面加载时调用drawRect函数画矩形 </script>

图片

绘制图形：绘制圆弧

arc(x, y, radius, startingAngle, endingAngle, antiClockwise);

使用arc()方法仅仅是创建圆弧路径，如需绘制路径要再使用strock()方法

使用arc()方法绘制圆弧​​​​​​​

<canvas id="mycanvas" height=500 width=500>您的浏览器不支持 canvas。</canvas> <script type="text/javascript"> ``function drawArc() { var c=document.getElementById("mycanvas"); // 获取网页中的canvas对象 var ctx=c.getContext("2d"); //获取canvas对象的上下文（2d绘图环境）`` ctx.beginPath(); // 开始创建路径 `` ctx.arc(50, 50, 30, 1.1 * Math.PI, 1.9 * Math.PI, false); `` ctx.stroke(); // 绘制路径 `` } ``window.addEventListener("load", drawArc, true); </script>

使用arc()方法画圆​​​​​​​

<canvas id="mycanvas" height=500 width=500>您的浏览器不支持 canvas。</canvas>``<script type="text/javascript"> ``function drawArc() { var c=document.getElementById("mycanvas"); // 获取网页中的canvas对象`` var ctx=c.getContext("2d"); //获取canvas对象的上下文（2d绘图环境） `` ctx.beginPath(); // 开始创建路径 `` ctx.arc(50, 50, 30, 0, 2 * Math.PI, false); `` ctx.stroke(); // 绘制路径 `` } window.addEventListener("load", drawArc, true); </script>

小结：

  • 路径path（仅有路径是不会有任何显示效果的）

  • 描边stroke（绘制路径/绘制路径的轮廓）

  • 填充fill（绘制路径内部）

通过设置canvasRenderingContext2D对象的以下属性指定描边的颜色和描边的宽度。

您的浏览器不支持 canvas。 <script type="text/javascript">`   `function strokeColorAndWidth()`  `{` `var c=document.getElementById("mycanvas"); // 获取网页中的canvas对象` `var ctx=c.getContext("2d"); //获取canvas对象的上下文（2d绘图环境） ctx.lineWidth = 5; ctx.strokeStyle = "red"; ctx.beginPath(); // 开始创建路径 ctx.moveTo(10,10); // 创建路径的起点 ctx.lineTo(100,100); // 添加路径中的一个点 ctx.stroke(); //绘制路径 ctx.strokeStyle = "yellow"; ctx.strokeRect(25,25, 80, 60); //矩形 ctx.strokeStyle = "blue"; ctx.beginPath(); // 开始创建路径 ctx.arc(100, 70, 40, 0, 2 * Math.PI, false); //圆形 ctx.stroke(); //绘制路径 }` `window.addEventListener("load", strokeColorAndWidth, true);

指定如何绘制线段的末端

  • 通过设置canvasRenderingContext2D对象的lineCap属性可以指定线段的末端如何绘制

  • lineCap 属性只有绘制较宽线段时才有效

ctx.lineWidth = 20; `` ctx.strokeStyle = "red"; ctx.lineCap = "butt"; ctx.beginPath();`` ctx.moveTo(10,10); `` ctx.lineTo(80,10); `` ctx.stroke(); ctx.lineCap = "round"; ctx.beginPath();`` ctx.moveTo(10,40); `` ctx.lineTo(80,40); `` ctx.stroke(); `` ctx.lineCap = "square"; ctx.beginPath();`` ctx.moveTo(10,70); ctx.lineTo(80,70);``ctx.stroke();

图片

画一个正六边形

思路提示：一个六边形是由六根直线组合的，那么可以通过计算坐标，把直线连接起来，就是六条直线合起来的正六边形啦

​​​​​​​

您的浏览器不支持 canvas。<script type="text/javascript">` `function drawline(){ var c=document.getElementById(“mycanvas”); // 获取网页中的canvas对象 var ctx=c.getContext(“2d”); //获取canvas对象的上下文（2d绘图环境）`

ctx.lineWidth = 10;`` ctx.strokeStyle = "red";

ctx.beginPath(); // 开始创建路径 ctx.moveTo(80,80); // 创建路径的起点 ctx.lineTo(160,80); // 添加路径中的一个点 ctx.stroke(); // 绘制路径

ctx.moveTo(156,80); // 创建路径的起点 ctx.lineTo(196,149.5); // 添加路径中的一个点 ctx.stroke(); // 绘制路径

ctx.moveTo(196,147); // 创建路径的起点 ctx.lineTo(156,219); // 添加路径中的一个点 ctx.stroke(); // 绘制路径

ctx.moveTo(160,219); // 创建路径的起点 ctx.lineTo(80,219); // 添加路径中的一个点 ctx.stroke(); // 绘制路径

ctx.moveTo(84,219); // 创建路径的起点 ctx.lineTo(44,147); // 添加路径中的一个点 ctx.stroke(); // 绘制路径

ctx.moveTo(44,149.5); // 创建路径的起点 ctx.lineTo(84,80); // 添加路径中的一个点 ctx.stroke(); // 绘制路径 } `window.addEventListener(“load”, drawline, false);//页面加载时触发drawline函数画直线``

画一个笑脸

图片

您的浏览器不支持 canvas。<script type="text/javascript">` `function drawArc(){ var c=document.getElementById(“mycanvas”); // 获取网页中的canvas对象 var ctx=c.getContext(“2d”); //获取canvas对象的上下文（2d绘图环境）`

跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。

也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。

面试准备

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

面试准备根据每个人掌握的知识不同，准备的时间也不一样。现在对于前端岗位，以前也许不是很重视算法这块，但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长，是一个长期的过程。需要在掌握了大部分前端基础知识的情况下，再有针对性的去复习算法。面试的时候算法能做出来肯定加分，但做不出来也不会一票否决，面试官也会给你提供一些思路。

2401_84434086
关注
专栏目录
实验四 使用CANVAS API画图
Destiny_159的博客
11-29 661
实验四 使用CANVAS API画图 一、实验目的 1、体会HTML编程； 　　2、掌握Canvas绘图 二、实验内容 实现利用鼠标画图，如下效果，可以选择画笔颜色和粗细（分别简单预定义几种即可），其中，“工具”和“形状”两栏的功能可以不强求实现： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style
2020年零基础前端学习路线（本人亲身经历，9个月拿到拼多多、美团、京东校招offer，5000字长文）
热门推荐
前端彭于晏的博客
12-01 8万+
前端学习路线 基础准备 开发工具 结论：vscode 最初我选择的是Hbuilder，轻量级，界面淡黄色和绿色结合比较护眼，但是插件较少，格式化代码以及快捷键用着不是特别顺手，转而使用vscode。 个人认识业界使用比较多的两种编辑器，vscode 和 webstorm。 具体的对比请移步VSCode 与 WebStorm 横向对比 个人想法，其实真没必要对于编辑器过于纠结，毕竟只是一个工具，大佬用txt都可以编写代码，在前期学习阶段可以选定一个坚持使用，等到学有所成，对于编辑器有着个人更独特的要求再去选择
Canvas API
weixin_33967071的博客
09-19 154
矩形 fillRect(x, y, width, height) 填充矩形 strokeRect(x, y, width, height) 绘制矩形边框 clearRect(x, y, width, height) 清除指定矩形区域，让清除部分完全透明。 rect(x, y, width, height) 绘制一个左上角坐标为（x,y），宽高为width以及height的矩形。 绘制矩形 DE...
①万字《详解canvas api画图》小白前端入门教程（建议收藏）
独木不成林，单弦不成音。
10-14 7034
知识体系、面试题库、技术互助、简历模板。文末公众号领取
Android基础—Canvas API详解
此博客已停用，博文会逐渐转移到新地址，http://blog.csdn.net/liupeifeng3514
04-20 391
本节引言： 我们可供调用的一些方法，我们分下类： drawXxx方法族：以一定的坐标值在当前画图区域画图，另外图层会叠加， 即后面绘画的图层会覆盖前面绘画的图层。 clipXXX方法族：在当前的画图区域裁剪(clip)出一个新的画图区域，这个 画图区域就是canvas对象的当前画图区域了。比如：clipRect(new Rect())， 那么该矩形区域就是canvas
web前端 小游戏 HTML5五彩连珠小游戏 用canvas实现的适合初学者入门
02-26
使用javascript 和 canvas 写的五彩连珠小游戏，是自己一行行代码敲出来的，带有注释，简单易懂，适合初学者入门。能快速让你对web前端用canvas制作小游戏有个基础的了解，熟悉canvas常用的一些api使用方式。
40个web前端实战项目，练完即可就业，从入门到进阶，基础到框架，html_css【附视频+源码】
2201_76017170的博客
12-24 1万+
40个web前端实战项目，练完即可就业，从入门到进阶，基础到框架，html_css【附视频+源码】
2014年辛星web前端教程贺岁版第五本即html5教程
10-22
辛星在2014年出版的web前端教程系列贺岁版的第五本专注于HTML5的介绍和应用。在开始详细讨论之前，我们需要了解HTML5的背景知识以及它在web前端开发中的重要性。 HTML5是在2004年由WHATWG组织提出，它代表了HTML的...
Web前端开发，利用HTML5 Canvas实现监控系统页面展示
qq_41597968的博客
12-23 4933
今天我们将向您展示如何创建前端监控系统。 在这里相信有许多想要学习web前端的同学，大家可以+下web前端学习分享裙：九六零+五零八+九二零，即可免费领取一整套系统的 web前端学习教程！欢迎大家来交流学习，我们一起学习，我认为程序员不应该停止，而是永远在学习的道路上。 该示例的动态效果如下： 让我们从基本场景开始。在HT中，将外部场景导入内部非常常见的方法是解析JSON文件。使用...
HTML5canvasAPI
03-05
HTML5canvasAPI画矩形，清除矩形，绘制路径，画圆等
HTML 5 Canvas API
03-29
NULL 博文链接：https://chenhailong.iteye.com/blog/1285171
Canvas Api(全)
Big_YiFeng的博客
05-30 3813
Canvas API ctx.moveTo(100,100) 参数 x 横坐标 y 竖坐标 作用 将画笔移动到坐标中的某个点 ctx.lineTo(100,100) 参数 x 横坐标 y 竖坐标 作用 将画笔从它所在的点到另一个点用线连接 ctx.stroke() 参数 作用 画 ctx.strokeStyle (‘red’) 参数 色值 作用 画笔颜色 ctx.beginPath() 参数 作用 开始使用一只新的画笔，防止之前的画笔的各种属性污染到新的图 ctx.closePath() 参数
Canvas API总结
weixin_33749131的博客
04-01 232
概述 Canvas（画布）用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。 开始使用 新建一个<canvas>网页元素。 <canvas id="myCanvas" width="400" height="200"> 你的浏览器不支持canvas! </canvas> 复制代码 替换内容...
Canvas API
赵佳敏的博客
02-20 285
一、Canvas概述 Canvas API（画布）用于在网页实时生成图像，并且可以操作图像的内容。 使用前，要先创建一个canvas网页元素，即<canvas></canvas>。所需功能全由js代码实现。 二、Canvas常见属性 height和width 表示的是canvas绘制区域的宽高。 注意：不要直接使用style给canvas元素设置宽高（若是使用style设置，那么久表示的是元素的大小） <canvas id="canvas">&.
HTML5(五)——Canvas API
前端人的博客
08-02 763
什么是 Canvas API? Canvas API（画布）提供了一个通过 javascript 和 html 的 canvas 元素来在网页上实时绘制图形的方式。可用于动画、游戏、图标、图片编辑等多个方面。 使用前，首先需要新建在网页上新建 canvas 元素。 <canvas id="mycanvas" width="400" height="400"> 您的浏览器不支持canvas！ </canvas> 上述代码，如果浏览器不支持 canvas，就会显示标签中间的文
Canvas绘制图片和区域（前端使用Canvas绘制图片，并在图片上绘制区域）
最新发布
weixin_65793170的博客
05-10 5836
1. 初始化Canvas画布// 获取canvas容器元素并设置宽高// 获取canvas元素并获取2D绘图上下文// 2. 初始化图片Canvas// 计算画布和图片的宽高比} else {// 设置三个canvas的宽高// 加载图片并绘制到imgCanvas上console.log("图片已加载");// 渲染已有数据// 3. 开始绘制。
canvas绘制图形的相关API
zw_wen的博客
01-16 535
1.直线：不同的端点样式； 2.弧线； 3.二次曲线； 4. 矩形； 5. 线性渐变； 6.径向渐变； 7. 通过图像数据获取原始图像的黑白版； 8. 图像尺寸； 以上实现的相关代码放在了：css-animation/canvas at main · 809877665/css-animation · GitHub 全文参考：《javaScript高级程序设计》第四版 ...
Web前端入门教程资源大合集
"这个资料包包含了一系列Web前端入门教程的资源，包括JavaScript基础学习资料、前端就业市场概述、两个不同阶段的京东项目实战资料，以及一系列关于HTML5、CSS3入门及提高的课程资料。此外，还提供了一张来自黑马...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值