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

2022-05-23 464

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

正文

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>

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

正文

canvas简介

canvas详解

在网页中创建canvas画布

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

canvas坐标系

绘制图形：绘制直线

绘制图形：绘制矩形

绘制图形：绘制圆弧

画一个正六边形

画一个笑脸

热门文章

最新文章

相关课程

相关电子书

相关实验场景

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

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

正文

canvas简介

canvas详解

在网页中创建canvas画布

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

canvas坐标系

绘制图形：绘制直线

绘制图形：绘制矩形

绘制图形：绘制圆弧

画一个正六边形

画一个笑脸

热门文章

最新文章

相关课程

相关电子书

相关实验场景