canvas教程(一) 简介
什么是 canvas
按例是要介绍一下 canvas 的,在没有 canvas 之前,我们为了网页的效果,很多情况下是使用了图片来实现,不过用图片就需要加载,而且图片的体积也是一个问题,所以在 html5 的规范里新增了一个 canvas 元素(画布)
那么其实在 html5 中有两个 2d 图形技术,还有一个是叫 svg,而它们的区别就在于:
- canvas 是由 js 动态生成的,svg 是使用 xml 静态描述的
- 每次修改,canvas 需要重绘,svg 不需要
- canvas 是“位图”,适用于像素处理和动态渲染,图形放大会影响质量,而 svg 是“矢量”,图形放大不会影响质量。
这两种技术都各有千秋,适用于不同的场合,我们可以根据开发场景来选择,这里就不多介绍了。
canvas 元素的知识
canvas 是一个行内块元素,它默认是宽度 300px 和高度 150px,可以使用 html 属性和 js 定义宽高。
⚠️ 假如是用 css 定义宽高,在使用 js 获取 canvas 的宽高依然会是其默认值
使用 canvas 绘制图形,需要三步
- 获取 canvas 对象
- 获取上下文环境对象 context
- 绘制图形
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教程(二) 绘制直线
经过 canvas 教程(一) 简介 我们知道了 canvas 的一些基本情况 而本次是给大家带来直线的绘制 canvas 中,基本图形有两种,一种是直线,还有一种是曲线 但是无论是直线还是曲线,我们 ...
- Node.js 教程 01 - 简介、安装及配置
系列目录: Node.js 教程 01 - 简介.安装及配置 Node.js 教程 02 - 经典的Hello World Node.js 教程 03 - 创建HTTP服务器 Node.js 教程 0 ...
- Bootstrap:教程、简介、环境安装
ylbtech-Bootstrap:教程.简介.环境安装 1. Bootstrap 教程返回顶部 1. Bootstrap 教程 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.B ...
- Python爬虫教程-20-xml 简介
本篇简单介绍 xml 在python爬虫方面的使用,想要具体学习 xml 可以到 w3school 查看 xml 文档 xml 文档链接:http://www.w3school.com.cn/xmld ...
- canvas教程(三) 绘制曲线
经过 canvas 教程(二) 绘制直线 我们知道了 canvas 的直线是怎么绘制的 而本次是给大家带来曲线相关的绘制 绘制圆形 在 canvas 中我们可以使用 arc 方法画一个圆 contex ...
- Canvas 教程
在本文章中 在你开始之前 教程内容 相关资料 A note to contributors <canvas> 是一种可以通过编写脚本(通常是JavaScript)来实现绘制图形的HTML元 ...
- 《Genesis-3D开源游戏引擎--横版格斗游戏制作教程:简介及目录》(附上完整工程文件)
介绍:讲述如何使用Genesis-3D来制作一个横版格斗游戏,涉及如何制作连招系统,如何使用包围盒实现碰撞检测,软键盘的制作,场景切换,技能读表,简单怪物AI等等,并为您提供这个框架的全套资源,源码以 ...
- [js高手之路] html5 canvas教程 - 绘制七巧板
七巧板长什么样? 用canvas把他画出来,其实就是把这7个区域的图形,每个点的坐标找出来,再用moveTo, lineTo连线,设置不同的颜色即可. <head> <meta ch ...
- Canvas教程
一.Canvas基本用法 canvas对应中文是“画布”,<canvas>是HTML5的新元素,IE9+支持 canvas元素的默认大小是300px * 150px,最简单的代码将生成一个 ...
随机推荐
- 查看ssh有没有被黑的IP
#grep "Failed password " /var/log/auth.log | awk '{print $11}' | sort | uniq -c | sort -nr ...
- IfcDirection
The IfcDirection provides a direction in two or three dimensional space depending on the number of D ...
- mysql 日期计算集合
#日期计算集合 #select curdate() #本前日期 #,DATE_ADD(`date`,interval day) /*本月前一天(昨天)*/ #,DATE_ADD(`date`,inte ...
- Qt开发经验小技巧31-40
代码判断MSVC编译器版本. if (_MSC_VER == 1800) MSVC++ 14.0 _MSC_VER == 1900 (Visual Studio 2015) MSVC++ 12.0 _ ...
- python非官方扩展库
https://www.lfd.uci.edu/~gohlke/pythonlibs/ 安装方法: 1.下载自己需要的库文件 例如:Twisted-19.2.1-cp37-cp37m-win32.wh ...
- 设置table表格的单元格间距两种方式
table表格里设置单元格td之间的间距,通常用cellspacing设置单元格间距,有时候该属性可能无效,或需要用其他方式时,可用其他方式实现,例如在背景是白色背景的时候,设置单元格td的borde ...
- Difference between LinkedList vs ArrayList in Java
source-url LinkedList implements it with a doubly-linked list. ArrayList implements it with a dynami ...
- FinalShell—一体化服务器管理软件(SSH客户端)
下面附上一些截图和官方连接: 官网:http://www.hostbuf.com/ FinalShell是一体化的的服务器,网络管理软件,不仅是ssh客户端,还是功能强大的开发,运维工具,充分满足开发 ...
- 一款新的好用的SSH工具——FinalShell
FinalShell是一体化的的服务器,网络管理软件,不仅是ssh客户端,还是功能强大的开发,运维工具,充分满足开发,运维需求.特色功能:免费海外服务器远程桌面加速,ssh加速,双边tcp加速,内网穿 ...
- QT+OPENCV实现录屏功能
本文使用QT+opencv来实现对指定窗体画面录制,并保存为avi文件. (1)获取窗体界面 QScreen类有一个grabWindow函数,可以用来获取窗体的画面,这个函数使用很简单,就是传入窗体句 ...