canvas入门系列(二):Canvas的基本用法
发布日期:2021-07-01 00:54:50
浏览次数:3
分类:技术文章
本文共 655 字,大约阅读时间需要 2 分钟。
</canvas> 标签不可省节
与 <img> 元素不同,<canvas> 元素需要结束标签(</canvas>)。如果结束标签不存在,则文档的其余部分会被认为是替代内容,将不会显示出来。
渲染上下文(The rendering context)
<canvas> 元素创造了一个固定大小的画布,它公开了一个或多个渲染上下文,其可以用来绘制和处理要展示的内容。我们将会将注意力放在2D渲染上下文中。其他种类的上下文也许提供了不同种类的渲染方式;比如, WebGL 使用了基于OpenGL ES的3D上下文 (“experimental-webgl”) 。
canvas起初是空白的。为了展示,首先脚本需要找到渲染上下文,然后在它的上面绘制。<canvas> 元素有一个叫做 getContext() 的方法,这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数,上下文的格式。对于2D图像而言,如本教程,你可以使用 CanvasRenderingContext2D。
var canvas = document.getElementById('tutorial');var ctx = canvas.getContext('2d');
代码的第一行通过使用 document.getElementById() 方法来为 <canvas> 元素得到DOM对象。一旦有了元素对象,你可以通过使用它的getContext() 方法来访问绘画上下文。
检查支持性节
替换内容是用于在不支持
转载地址:https://m528964214.blog.csdn.net/article/details/89811668 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
做的很好,不错不错
[***.243.131.199]2024年04月29日 08时00分07秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
网络编程之 Socket函数 (一)
2019-05-01
网络编程之 Socket函数 (二)
2019-05-01
网络编程之 Socket的模式(一) --- “阻塞/非阻塞” 与 “同步/异步”
2019-05-01
网络编程之 Socket的模式(二) --- “Linux网络I/O模型”
2019-05-01
网络编程之 Socket的模式(三) --- “Window网络I/O模型”
2019-05-01
网络编程之 Socket的模式(四) --- “Window网络I/O模型” 续
2019-05-01
ffmpeg & mplayer & vlc 手册
2021-07-04
视频编解码学习之二:编解码框架
2021-07-04
Redis拓展篇----过期策略
2021-07-04
Redis学习拓展篇---保护Redis
2021-07-04
Golang源码学习----string包
2021-07-04
Go语言并发组件
2021-07-04
Go语言的并发模式
2021-07-04
Linux中如何优雅的删除被打开的文件
2021-07-04
从零开始学Linux内核-----从Unix到Linux
2021-07-04
Linux内核学习----进程管理
2021-07-04
linux内核学习-----进程调度
2021-07-04
算法实现----二分查找go语言实现
2021-07-04
简析STUN协议
2021-07-04
使用 Minidumps 和 Visual Studio .NET 进行崩溃后调试
2021-07-04