400-650-7353

精品课程

您所在的位置:首页 > IT干货资料 > web前端 > 【Web前端基础知识】canvas基础入门知识详解

【Web前端基础知识】canvas基础入门知识详解

  • 发布: Web前端培训
  • 来源:优就业
  • 2021-09-28 14:09:04
  • 阅读()
  • 分享
  • 手机端入口

有的人可能听说过html5,在html5中新增了很多标签,其中就有我们今天要讲的Canvas,那么问题就随之来了,什么是 canvas呢?HTML5的canvas元素可被用来通过JavaScript(CanvasAPI 或WebGLAPI)绘制图形及图形动画【来源于MDN的说明】。

  1. 注意: 
  2. 1.<canvas> 标签只是图形容器,必须需要使用脚本来绘制图形。 
  3. 2.默认情况下 <canvas> 元素没有边框和内容。 

接下来我们一起画一个canvas吧

首先,要创建一个画布(Canvas)

  1. HTML:宽300, 高200 
  2. <canvas id="myCan" width="300" height="200" style="border: 1px solid black"></canvas> 

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.

提示:可以在HTML页面中使用多个canvas元素.

接下来,第二步开始使用 JavaScript 来绘制图像

我们之前也提到说canvas 元素本身是没有绘图能力的,所以关于绘制的工作需要在 JavaScript 内部完成:

JavaScript:

  1. 1.找到 <canvas> 元素: 
  2. var can=document.getElementById("myCan"); 
  3. 2.创建 context 对象: 
  4. //getContext("2d") 对象是canvas内置的 HTML5 对象,它拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 
  5. var c=can.getContext("2d"); 
  6. 3.设置fillStyle属性可以是CSS颜色,渐变,或图案等。 
  7.   //fillStyle 默认设置是黑色。 
  8. c.fillStyle="red"
  9.  //fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。 
  10. c.fillRect(100,50,100,100); 

效果图:

第三步 关于Canvas 的坐标

我们知道实际上canvas其实是一个二维的网格,它 的左上角坐标为 (0,0),

之前我们在上面使用 的fillRect 方法,有参数 (100,50,100,100),

这几个参数的意思实际上是指:在canvas画布上绘制 100x100 的矩形,从坐标点(100,50)开始 。

坐标示意图:

第四步 关于Canvas的路径

我们可以使用以下两种的方法,在Canvas上画线:

1.moveTo(x,y) 定义线条开始坐标

2.lineTo(x,y) 定义线条结束坐标

示例:

  1. HTML:宽100, 高100 
  2. <canvas id="myCanvas" width="100" height="100"  
  3. style="border: 1px solid black"></canvas> 

JavaScript:

  1. 定义开始坐标(50,50), 和结束坐标 (100,100)。然后使用 stroke() 方法来绘制线条: 
  2. var can=document.getElementById("myCan"); 
  3. var c=can.getContext("2d"); 
  4. c.moveTo(50,50); 
  5. c.lineTo(100,100); 
  6. c.stroke(); 

效果图:

学习疑问申请解答
您的姓名
您的电话
意向课程
 

中公优就业

IT小助手

扫描上方二维码添加好友,请备注:599,享学习福利。

>>本文地址:
注:本站稿件未经许可不得转载,转载请保留出处及源文件地址。

推荐阅读

优就业:ujiuye

关注中公优就业官方微信

  • 关注微信回复关键词“大礼包”,享学习福利
QQ交流群
在线疑问解答
(加群备注“网站”)
IT培训交流群 加入群聊 +
软件测试 加入群聊 +
全链路UI/UE设计 加入群聊 +
Python+人工智能 加入群聊 +
互联网营销 加入群聊 +
Java开发 加入群聊 +
PHP开发 加入群聊 +
VR/AR游戏开发 加入群聊 +
大前端 加入群聊 +
大数据 加入群聊 +
Linux云计算 加入群聊 +
优就业官方微信
扫码回复关键词“大礼包”
享学习福利

测一测
你适合学哪门IT技术?

1 您的年龄

2 您的学历

3 您更想做哪个方向的工作?

获取测试结果
 
课程资料、活动优惠 领取通道