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

效果图:

文章“【Web前端基础知识】canvas基础入门知识详解”已帮助

更多内容

>>本文地址:http://www.ujiuye.com/zhuanye/2021/70197.html

THE END  

声明:本站稿件版权均属中公教育优就业所有,未经许可不得擅自转载。

领取零基础自学IT资源

(内含学习路线+视频教程+项目源码)

涉及Java、Web前端、UI设计、软件测试、Python等多个IT热门方向

打开微信扫一扫即可领取哦~

1 您的年龄

2 您的学历

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

获取测试结果
  • 大前端大前端
  • 大数据大数据
  • 互联网营销互联网营销
  • JavaJava
  • Linux云计算Linux
  • Python+人工智能Python
  • 嵌入式物联网嵌入式
  • 全域电商运营全域电商运营
  • 软件测试软件测试
  • 室内设计室内设计
  • 平面设计平面设计
  • 电商设计电商设计
  • 网页设计网页设计
  • 全链路UI/UE设计UI设计
  • VR/AR游戏开发VR/AR
  • 网络安全网络安全
  • 新媒体与短视频运营新媒体
  • 直播带货直播带货
  • 智能机器人软件开发智能机器人
 

快速通道fast track

近期开班时间TIME