什么是 canvas

按例是要介绍一下 canvas 的,在没有 canvas 之前,我们为了网页的效果,很多情况下是使用了图片来实现,不过用图片就需要加载,而且图片的体积也是一个问题,所以在 html5 的规范里新增了一个 canvas 元素(画布)

那么其实在 html5 中有两个 2d 图形技术,还有一个是叫 svg,而它们的区别就在于:

  1. canvas 是由 js 动态生成的,svg 是使用 xml 静态描述的
  2. 每次修改,canvas 需要重绘,svg 不需要
  3. canvas 是“位图”,适用于像素处理和动态渲染,图形放大会影响质量,而 svg 是“矢量”,图形放大不会影响质量。

这两种技术都各有千秋,适用于不同的场合,我们可以根据开发场景来选择,这里就不多介绍了。

canvas 元素的知识

canvas 是一个行内块元素,它默认是宽度 300px 和高度 150px,可以使用 html 属性和 js 定义宽高。

⚠️ 假如是用 css 定义宽高,在使用 js 获取 canvas 的宽高依然会是其默认值

使用 canvas 绘制图形,需要三步

  1. 获取 canvas 对象
  2. 获取上下文环境对象 context
  3. 绘制图形
var canvas = document.getElementById('canvasId');

var context = canvas.getContext('2d');

而我们以后所学习到的 api 和属性都是 context 对象的。

那么到这里有眼力好的同学就能看到了 getContext 方法的参数是 2d,那是不是有 3d?

其实 html5 的 canvas 暂时只提供了 2d,想在 html 使用 3d 的同学可以学习一下 webgl,webgl 其实难度也有点大,也许可以尝试一下 threejs,因为 threejs 是基于 webgl 封装的,感兴趣的都可以去相关的官网上学习。

结束

好了,本次的教程就到这里结束了,下次将为大家带来直线相关的绘制

戳我进入 canvas 教程(二) 绘制直线

canvas教程(一) 简介的更多相关文章

  1. canvas教程(二) 绘制直线

    经过 canvas 教程(一) 简介 我们知道了 canvas 的一些基本情况 而本次是给大家带来直线的绘制 canvas 中,基本图形有两种,一种是直线,还有一种是曲线 但是无论是直线还是曲线,我们 ...

  2. Node.js 教程 01 - 简介、安装及配置

    系列目录: Node.js 教程 01 - 简介.安装及配置 Node.js 教程 02 - 经典的Hello World Node.js 教程 03 - 创建HTTP服务器 Node.js 教程 0 ...

  3. Bootstrap:教程、简介、环境安装

    ylbtech-Bootstrap:教程.简介.环境安装 1. Bootstrap 教程返回顶部 1. Bootstrap 教程 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.B ...

  4. Python爬虫教程-20-xml 简介

    本篇简单介绍 xml 在python爬虫方面的使用,想要具体学习 xml 可以到 w3school 查看 xml 文档 xml 文档链接:http://www.w3school.com.cn/xmld ...

  5. canvas教程(三) 绘制曲线

    经过 canvas 教程(二) 绘制直线 我们知道了 canvas 的直线是怎么绘制的 而本次是给大家带来曲线相关的绘制 绘制圆形 在 canvas 中我们可以使用 arc 方法画一个圆 contex ...

  6. Canvas 教程

    在本文章中 在你开始之前 教程内容 相关资料 A note to contributors <canvas> 是一种可以通过编写脚本(通常是JavaScript)来实现绘制图形的HTML元 ...

  7. 《Genesis-3D开源游戏引擎--横版格斗游戏制作教程:简介及目录》(附上完整工程文件)

    介绍:讲述如何使用Genesis-3D来制作一个横版格斗游戏,涉及如何制作连招系统,如何使用包围盒实现碰撞检测,软键盘的制作,场景切换,技能读表,简单怪物AI等等,并为您提供这个框架的全套资源,源码以 ...

  8. [js高手之路] html5 canvas教程 - 绘制七巧板

    七巧板长什么样? 用canvas把他画出来,其实就是把这7个区域的图形,每个点的坐标找出来,再用moveTo, lineTo连线,设置不同的颜色即可. <head> <meta ch ...

  9. Canvas教程

    一.Canvas基本用法 canvas对应中文是“画布”,<canvas>是HTML5的新元素,IE9+支持 canvas元素的默认大小是300px * 150px,最简单的代码将生成一个 ...

随机推荐

  1. 查看ssh有没有被黑的IP

    #grep "Failed password " /var/log/auth.log | awk '{print $11}' | sort | uniq -c | sort -nr ...

  2. IfcDirection

    The IfcDirection provides a direction in two or three dimensional space depending on the number of D ...

  3. mysql 日期计算集合

    #日期计算集合 #select curdate() #本前日期 #,DATE_ADD(`date`,interval day) /*本月前一天(昨天)*/ #,DATE_ADD(`date`,inte ...

  4. Qt开发经验小技巧31-40

    代码判断MSVC编译器版本. if (_MSC_VER == 1800) MSVC++ 14.0 _MSC_VER == 1900 (Visual Studio 2015) MSVC++ 12.0 _ ...

  5. python非官方扩展库

    https://www.lfd.uci.edu/~gohlke/pythonlibs/ 安装方法: 1.下载自己需要的库文件 例如:Twisted-19.2.1-cp37-cp37m-win32.wh ...

  6. 设置table表格的单元格间距两种方式

    table表格里设置单元格td之间的间距,通常用cellspacing设置单元格间距,有时候该属性可能无效,或需要用其他方式时,可用其他方式实现,例如在背景是白色背景的时候,设置单元格td的borde ...

  7. Difference between LinkedList vs ArrayList in Java

    source-url LinkedList implements it with a doubly-linked list. ArrayList implements it with a dynami ...

  8. FinalShell—一体化服务器管理软件(SSH客户端)

    下面附上一些截图和官方连接: 官网:http://www.hostbuf.com/ FinalShell是一体化的的服务器,网络管理软件,不仅是ssh客户端,还是功能强大的开发,运维工具,充分满足开发 ...

  9. 一款新的好用的SSH工具——FinalShell

    FinalShell是一体化的的服务器,网络管理软件,不仅是ssh客户端,还是功能强大的开发,运维工具,充分满足开发,运维需求.特色功能:免费海外服务器远程桌面加速,ssh加速,双边tcp加速,内网穿 ...

  10. QT+OPENCV实现录屏功能

    本文使用QT+opencv来实现对指定窗体画面录制,并保存为avi文件. (1)获取窗体界面 QScreen类有一个grabWindow函数,可以用来获取窗体的画面,这个函数使用很简单,就是传入窗体句 ...