①万字《详解canvas api画图》小白前端入门教程（建议收藏）_canvasapi教程

* 得到的对象c即为**mycanvas**对象。
* 要在其中绘图还需要获得**mycanvas**对象的2d渲染上下文（**canvasRenderingContext2D**）对象：

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

### 


![图片](https://img-blog.csdnimg.cn/img_convert/002823134acca58f79a472b4069082bf.png)


### canvas坐标系



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


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


* 从原点延x轴从左到右，取值依次递增。
* 从原点延y轴从上到下，取值依次递增。


![图片](https://img-blog.csdnimg.cn/img_convert/f9ce2e94e5b3ee30d7db6ad4af3b0ede.png)




![图片](https://img-blog.csdnimg.cn/img_convert/002823134acca58f79a472b4069082bf.png)


### 绘制图形：绘制直线



在网页中使用**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。

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

您的浏览器不支持 canvas。

![图片](https://img-blog.csdnimg.cn/img_convert/002823134acca58f79a472b4069082bf.png)


### 绘制图形：绘制矩形



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

您的浏览器不支持 canvas。

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


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

您的浏览器不支持 canvas。

使用**fillRect**()方法填充矩形


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

您的浏览器不支持 canvas。

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

您的浏览器不支持 canvas。

![图片](https://img-blog.csdnimg.cn/img_convert/002823134acca58f79a472b4069082bf.png)


### 绘制图形：绘制圆弧

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

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


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

您的浏览器不支持 canvas。

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

您的浏览器不支持 canvas。

小结：


* 路径**path**（仅有路径是不会有任何显示效果的）
* 描边**stroke**（绘制路径/绘制路径的轮廓）
* 填充**fill**（绘制路径内部）



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

您的浏览器不支持 canvas。

#### 指定如何绘制线段的末端


* 通过设置**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();

![图片](https://img-blog.csdnimg.cn/img_convert/002823134acca58f79a472b4069082bf.png)


### **画一个正六边形**



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


​​​​​​​

您的浏览器不支持 canvas。

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>

### **画一个笑脸**



![图片](https://img-blog.csdnimg.cn/img_convert/a5f0852dade52b2a95ff692520bd0693.png)

您的浏览器不支持 canvas。

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);

### `送书活动`


#### 参与方式一：


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


#### 参与方式二：


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


![](https://img-blog.csdnimg.cn/935be6f8ea3d49b4adeafb6c27c5cd2a.png)





### 给大家的福利


**零基础入门**


对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。


![](https://img-blog.csdnimg.cn/img_convert/95608e9062782d28f4f04f821405d99a.png)


同时每个成长路线对应的板块都有配套的视频提供：


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/a91b9e8100834e9291cfcf1695d8cd42.png#pic_center)


因篇幅有限，仅展示部分资料

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以点击这里获取](https://bbs.csdn.net/topics/618540462)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**