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

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

正文


canvas简介


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


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


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



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


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


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


123.png


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


234.png


canvas坐标系


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

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

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


123.png

234.png


绘制图形:绘制直线


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


234.png


绘制图形:绘制矩形


使用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>  


234.png


绘制图形:绘制圆弧


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


234.png


画一个正六边形


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


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


画一个笑脸


123.png


<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>
相关文章
|
1月前
|
JSON 数据可视化 API
Python 中调用 DeepSeek-R1 API的方法介绍,图文教程
本教程详细介绍了如何使用 Python 调用 DeepSeek 的 R1 大模型 API,适合编程新手。首先登录 DeepSeek 控制台获取 API Key,安装 Python 和 requests 库后,编写基础调用代码并运行。文末包含常见问题解答和更简单的可视化调用方法,建议收藏备用。 原文链接:[如何使用 Python 调用 DeepSeek-R1 API?](https://apifox.com/apiskills/how-to-call-the-deepseek-r1-api-using-python/)
|
23天前
|
人工智能 API 开发工具
【重磅发布】 免费领取阿里云百炼AI大模型100万Tokens教程出炉,API接口实战操作,DeepSeek-R1满血版即刻体验!
阿里云百炼是一站式大模型开发及应用构建平台,支持开发者和业务人员轻松设计、构建大模型应用。通过简单操作,用户可在5分钟内开发出大模型应用或在几小时内训练专属模型,专注于创新。
518 89
【重磅发布】 免费领取阿里云百炼AI大模型100万Tokens教程出炉,API接口实战操作,DeepSeek-R1满血版即刻体验!
|
27天前
|
机器学习/深度学习 人工智能 Serverless
👉「免费满血DeepSeek实战-联网搜索×Prompt秘籍|暨6平台横评」
满血 DeepSeek 免费用!支持联网搜索!创作声明:真人攥写-非AI生成,Written-By-Human-Not-By-AI
2606 9
👉「免费满血DeepSeek实战-联网搜索×Prompt秘籍|暨6平台横评」
|
1月前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
64 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
1月前
|
缓存 自然语言处理 安全
快速调用 Deepseek API!【超详细教程】
Deepseek 强大的功能,在本教程中,将指导您如何获取 DeepSeek API 密钥,并演示如何使用该密钥调用 DeepSeek API 以进行调试。
|
7天前
|
人工智能 测试技术 API
Windows用户必备:Postman v11详细安装指南与API测试入门教程(附官网下载
Postman是全球领先的API开发与测试工具,支持REST、SOAP、GraphQL等协议调试。2025年最新版v11新增AI智能生成测试用例、多环境变量同步等功能,适用于前后端分离开发、自动化测试、接口文档自动生成及团队协作共享API资源。本文详细介绍Postman的软件定位、核心功能、安装步骤、首次配置、基础使用及常见问题解答,帮助用户快速上手并高效利用该工具进行API开发与测试。
|
1月前
|
存储 人工智能 安全
如何调用 DeepSeek-R1 API ?图文教程
首先登录 DeepSeek 开放平台,创建并保存 API Key。接着,在 Apifox 中设置环境变量,导入 DeepSeek 提供的 cURL 并配置 Authorization 为 `Bearer {{API_KEY}}`。通过切换至正式环境发送请求,可实现对话功能,支持流式或整体输出。
1899 15
|
3月前
|
网络协议 API
检测指定TCP端口开放状态免费API接口教程
此API用于检测指定TCP端口是否开放,支持POST/GET请求。需提供用户ID、KEY、目标主机,可选指定端口(默认80)和地区(默认国内)。返回状态码、信息提示、检测主机、端口及状态(开放或关闭)。示例中ID和KEY为公共测试用,建议使用个人ID和KEY以享受更高调用频率。
93 14
|
4月前
|
API 网络安全
发送UDP数据免费API接口教程
此API用于向指定主机发送UDP数据,支持POST或GET请求。需提供用户ID、密钥、接收IP及端口、数据内容等参数。返回状态码和信息提示。示例中含公共ID与KEY,建议使用个人凭证以提高调用频率。
79 13
|
3月前
|
API
获取网页状态码[可指定地域]免费API接口教程
该接口用于获取指定网址的访问状态码,支持从国内、香港、美国等地域节点访问。通过POST或GET请求,需提供用户ID、KEY及目标网址等参数。返回结果包括状态码和信息提示。 示例:https://cn.apihz.cn/api/wangzhan/getcode.php?id=88888888&key=88888888&type=1&url=www.apihz.cn。

热门文章

最新文章