正文

①万字《详解canvasapi画图》小白前端入门教程（建议收藏）(代码片段)

不吃西红柿丶  不吃西红柿丶  2023-01-14  140

关键词：

🍅 作者：阿珊

🍅 作者简介：95后前端小姐姐，蓝桥签约作者，欢迎点赞、收藏、评论

🍅 粉丝专属福利：知识体系、面试题库、技术互助、简历模板。文末公众号领取

🍅 包邮送书（每周1-2次）：点赞、收藏、评论本文章即可参与或关注公众号「信息技术智库」回复「送书」

送书活动说明及每期开奖：https://blog.csdn.net/weixin_39032019/category_11380101.html

canvas简介

canvas详解

在网页中创建canvas画布

使用JavaScript获取网页中的canvas对象

canvas简介

canvas元素是HTML5中新增的一个用于绘图的重要元素。

在页面中增加一个canvas元素就相当于在网页中添加一块画布，之后就可以利用一系列的绘图指令，在“画布”上绘制图形。

在网页上使用canvas元素时，它会创建一块矩形区域。

用户可以自定义具体的大小或者设置canvas元素的其他特性。

在页面中加人了canvas元素后，可以通过Javascript来控制画布。

可以在其中添加图片/线条/文字等，也可以在里面进行绘图设置/高级动画等。

canvas详解

<canvas id="xxx" height=… width=…>…</canvas>

说明：

id，canvas元素的标识id
height，画布高度，单位为像素
width，画布宽度，单位为像素
<canvas></canvas>之间指定当浏览器不支持canvas时显示的字符串

在网页中创建canvas画布

<canvas id="mycanvas" height=600 width=400> 您的浏览器不支持 canvas。 </canvas>

在Chrome等支持HTML5的浏览器创建一个空画布，什么都不显示。ie8以下会显示您的浏览器不支持 canvas。

使用JavaScript获取网页中的canvas对象

在JavaScript中，可以使用document.getElementById()方法获取网页中指定id值的对象：

 document.getElementById(元素的id属性)

获取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画布，用于绘画

<canvas id="mycanvas" height=… width=…>...</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 id="mycanvas" height=100 width=100>您的浏览器不支持 canvas。</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函数画直线</script>

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

<canvas id="mycanvas" height=100 width=100>您的浏览器不支持 canvas。</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函数画三角形</script>

绘制图形：绘制矩形

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

<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.rect(20,20, 100, 50);  // 创建左上顶点为(20, 20)、长100、宽50的矩形路径    ctx.stroke(); //绘制路径    window.addEventListener("load", drawRect, true); //页面加载时调用drawRect函数画矩形</script>

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

不需要使用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.rect(20,20, 100, 50);  // 创建左上顶点为(20, 20)、长100、宽50的矩形路径 ctx. strokeRect(20,20, 100, 50);     //ctx.stroke(); //绘制路径      window.addEventListener("load", drawRect, true); //页面加载时调用drawRect函数画矩形</script>

使用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 id="mycanvas" height=500 width=500>您的浏览器不支持 canvas。 </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);</script>

指定如何绘制线段的末端

通过设置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 id="mycanvas" height=500 width=500>您的浏览器不支持 canvas。</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函数画直线</script>

画一个笑脸

<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(250, 250, 100, 0, 2 * Math.PI, false);   ctx.fillStyle = "yellow";  ctx.fill();  ctx.stroke();  // 绘制路径  

  ctx.beginPath();  //  开始创建路径  ctx.arc(200, 200, 10, 0, 2 * Math.PI, false);   ctx.fillStyle = "gray";  ctx.fill();  ctx.stroke();  // 绘制路径  

  ctx.beginPath();  //  开始创建路径  ctx.arc(300, 200, 10, 0, 2 * Math.PI, false);   ctx.fillStyle = "gray";  ctx.fill();  ctx.stroke();  // 绘制路径  
  ctx.beginPath();  //  开始创建路径  ctx.arc(250, 280, 40,0.8* Math.PI, 0.2* Math.PI, true);   ctx.stroke();  // 绘制路径    window.addEventListener("load", drawArc, true);</script>

`送书活动`

参与方式一：

点赞、收藏、评论本文，即可直接参与，3天内会公布抽奖信息和联系你。

参与方式二：

关注「信息技术智库」回复「送书」

本期3本，如有需要可等下期活动或自行安排：

《人工智能数学基础》https://item.jd.com/13009168.html
《Python神经网络入门与实战》 https://item.jd.com/12748581.html
《Python入门到人工智能实战》https://item.jd.com/12648361.html
《Python量化金融编程从入门到精通》https://item.jd.com/13045490.html

添加公众号「信息技术智库」：

🍅 硬核资料：20G，8大类资料，关注即可领取（PPT模板、简历模板、技术资料）
🍅 技术互助：技术群大佬指点迷津，你的问题可能不是问题，求资源在群里喊一声。
🍅 面试题库：由各个技术群小伙伴们共同投稿，热乎的大厂面试真题，持续更新中。
🍅 知识体系：含编程语言、算法、大数据生态圈组件（Mysql、Hive、Spark、Flink）、数据仓库、前端等。

👇👇送书抽奖丨技术互助丨粉丝福利👇👇

1万字，阿珊学习笔记《前端基础知识》小白入门导读（建议收藏）

🍅作者：阿珊🍅作者简介：95后前端小姐姐，蓝桥签约作者，欢迎点赞、收藏、评论🍅粉丝专属福利：知识体系、面试题库、技术互助、简历模板。文末公众号领取🍅包邮送书（每周1-2次&... 查看详情

1万字，阿珊学习笔记《前端基础知识》小白入门导读（建议收藏）(代码片段)

nginx从入门到实践，万字详解！

最近越来越频繁地遇到需要配置反向代理的场景，在自己搭建博客的时候，也不可避免要用到Nginx，所以这段时间集中学习了一下Nginx，同时做了一些笔记，希望也可以帮助到大家～查看详情

❤️❤️爆肝3万字整理小白入门与提升分布式版本管理软件：git，图文并茂(建议收藏)--已码一万字❤️❤️(代码片段)

小白快速快入门Git什么是GitSVNVSGit什么是版本控制安装Git谁在操作？Git本地仓库本地仓库构造重点Git常用基本操作gitaddgitcommitgitdiffgitloggitresetgitmvcheckoutgittagclearGithub使用教程什么是Github安装Github添加远程仓库找到key打开Github... 查看详情

❤️万字python基础保姆式教学❤️，小白快速入门python！(代码片段)

前言又是爆肝干文的日子，继上次说要出一期Python新手入门教程系列文章后，就在不停地整理和码字，终于是把【基础入门】这一块给写出来了。高级编程的【正则表达式】和【面向对象编程】内容我在之前已经出过... 查看详情

❤️万字python基础保姆式教学❤️，小白快速入门python！(代码片段)

小曾带你深入浅出机器学习（小白入门必备，近3万字带你了解机器学习）

文章目录初识机器学习入门分类回归算法浅析逻辑回归初探损失函数什么是损失函数？损失函数、代价函数和目标函数三者的区别损失函数的Pytorch实现与机制常用损失函数类型1、nn.CrossEntropyLoss数学原理功能与使用2、nn.NLLLos... 查看详情

万字博文教你python爬虫pyquery库详解篇

如果你对web比较熟悉，比较喜欢用CSS选择器，如果你对jQuery有所了解。那么，就一起来看看这个解析库——pyquery吧！pyquery库详解每篇前言：1.初始化：①直接传入字符串②传入URL③传入文件名2.基本CSS选择器3.查找节点①子孙节... 查看详情

小白都能看得懂的教程一本教你如何在前端实现富文本编辑器(代码片段)

小白都能看得懂的教程一本教你如何在前端实现富文本编辑器博主博客文章内容导航（实时更新）更多优质文章推荐：收藏！最详细的Python全栈开发指南看完这篇你还不会Python全栈开发你来打我!!!一本教你如何在... 查看详情

强烈推荐，建议收藏一万字手把手教你学习springcloud，带你快速入门

接下来我会大家学习非常重要的一个内容，那就是SpringCloud，接下来的内容会以最快的速度带大家学习SpringCloud，因为当你学完之后，你就真的可以算是跨过了Java的入门学习，也就是你已经有了Java的底子，... 查看详情

强烈推荐，建议收藏一万字手把手教你学习springcloud，带你快速入门

五分钟教你使用vue-cli3创建项目（小白入门必看）(代码片段)

五分钟教你使用vue-cli3创建项目（小白入门必看）一、搭建vue环境安装Nodejs官网下载Nodejs，如果希望稳定的开发环境则下LTS(LongTimeSupport)长期支持版，稳定。点我进入node官网安装好后cmd输入node-v查询是否安装成功&#... 查看详情

mysql从入门到实践，万字详解！(代码片段)

数据库是往全栈发展不得不跨过的一道坎，大家不可避免会学到用到相关知识，最近查资料的时候发现网上很多内容要么就特别深，要么不成体系，对一些希望浅尝辄止仅仅是使用一下的人不太友好。最近刚好有... 查看详情

mysql从入门到实践，万字详解！(代码片段)

前端入门html+css万字血书总结-强烈安利

前言：想成为Web前端工程师这三件法宝少不了HTML、CSS和JavaScrip，工作中我们能够运用它们完成大多数任务。一位好的Web前端开发工程师在知识体系上不仅要有广度还要有深度，前端基础是重中之中！带你高效率... 查看详情

flink从入门到精通100篇（二十一）-万字长文详解flink中的copyonwritestatetable

前言现如今想阅读HashMap源码实际上比较简单，因为网上一大堆博客去分析HashMap和ConcurrentHashMap。本文详细分析CopyOnWriteStateTable源码，阅读复杂集合类源码的过程是相当有挑战的，博主在刚开始阅读也遇到很多疑问，最后一一解... 查看详情

python爬虫4万字，详解selenium从入门到实战错过再无(代码片段)

👉跳转文末👈获取实战源码与作者联系方式，共同学习进步文章目录简介selenium安装安装浏览器驱动确定浏览器版本下载驱动定位页面元素打开指定页面id定位name定位class定位tag定位xpath定位css定位link定位partial_link定... 查看详情

五万字15张导图java自学路线，小白零基础入门，程序员进阶，收藏这篇就够了(代码片段)

本文收录于《技术专家修炼》文中配套资料合集路线导图高清源文件点击跳转到文末点击底部卡片回复「资料」领取哈喽，大家好，我是一条~最近粉丝问我有没有Java自学路线，有了方向才能按图索骥，事半功倍... 查看详情

正文

①万字《详解canvasapi画图》小白前端入门教程（建议收藏）(代码片段)

canvas简介

canvas详解

在网页中创建canvas画布

使用JavaScript获取网页中的canvas对象

canvas坐标系

绘制图形：绘制直线

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

绘制图形：绘制矩形

绘制图形：绘制圆弧

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

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

指定如何绘制线段的末端

画一个正六边形

画一个笑脸

送书活动

参与方式一：

参与方式二：

1万字，阿珊学习笔记《前端基础知识》小白入门导读（建议收藏）

1万字，阿珊学习笔记《前端基础知识》小白入门导读（建议收藏）(代码片段)

nginx从入门到实践，万字详解！

❤️❤️爆肝3万字整理小白入门与提升分布式版本管理软件：git，图文并茂(建议收藏)--已码一万字❤️❤️(代码片段)

❤️万字python基础保姆式教学❤️，小白快速入门python！(代码片段)

❤️万字python基础保姆式教学❤️，小白快速入门python！(代码片段)

小曾带你深入浅出机器学习（小白入门必备，近3万字带你了解机器学习）

万字博文教你python爬虫pyquery库详解篇

小白都能看得懂的教程一本教你如何在前端实现富文本编辑器(代码片段)

强烈推荐，建议收藏一万字手把手教你学习springcloud，带你快速入门

强烈推荐，建议收藏一万字手把手教你学习springcloud，带你快速入门

五分钟教你使用vue-cli3创建项目（小白入门必看）(代码片段)

mysql从入门到实践，万字详解！(代码片段)

mysql从入门到实践，万字详解！(代码片段)

前端入门html+css万字血书总结-强烈安利

flink从入门到精通100篇（二十一）-万字长文详解flink中的copyonwritestatetable

python爬虫4万字，详解selenium从入门到实战错过再无(代码片段)

五万字15张导图java自学路线，小白零基础入门，程序员进阶，收藏这篇就够了(代码片段)

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

使用arc()方法绘制圆弧

使用arc()方法画圆

`送书活动`