Canvas-基本用法
2024-09-05 04:16:20
<canvas>
是一个可以使用脚本(通常为JavaScript
)来绘制图形的 HTML
元素.例如,它可以用于绘制图表、制作图片构图或者制作简单的(以及不那么简单的)动画.
基本用法
canvas元素
<canvas id="tutorial" width="150" height="150">
不支持canvas
</canvas>
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d'); // canvas元素的方法getContext()用来获得渲染上下文和它的绘画功能。getContext()只有一个参数,上下文的格式。
<canvas>
标签只有两个属性—— width和height。这些都是可选的,并且同样利用 DOM properties 来设置。在<canvas>
标签中提供替换内容,不支持<canvas>
的浏览器将会忽略容器并在其中渲染后备内容。而支持<canvas>
的浏览器将会忽略在容器中包含的内容,并且只是正常渲染canvas。
!> 注意: 如果你绘制出来的图像是扭曲的, 尝试用width和height属性为<canvas>
明确规定宽高,而不是使用CSS。<canvas>
元素需要结束标签(</canvas>
)。如果结束标签不存在,则文档的其余部分会被认为是替代内容,将不会显示出来。
简单例子
canvas(id="canvas" width="150" height="150")
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
See the Pen canvas-demo-rect by flqbestboy
(@fanlinqiang) on CodePen.
最新文章
- Windows Server 2008 R2安装子域控制器
- sql 游标
- asp.net获取客户端IP方法(转载)
- 实现listview中checkbox的多选与记录
- 转:c++类实例在内存中的分配
- 用NAN简化Google V8 JS引擎的扩展
- 【最后一篇API译文】Android开发-API指南- Contacts Provider
- Oracle索引(B*tree与Bitmap)的学习总结
- 2015 UESTC Winter Training #7【2010-2011 Petrozavodsk Winter Training Camp, Saratov State U Contest】
- Unix/Linux环境C编程入门教程(27) 内存那些事儿
- HDU 3126 Nova [2009 Asia Wuhan Regional Contest Online]
- Objective-C Blocks测试题与解析
- VS2008 + WDK 配置 及其编译错误
- Angular官方教程采坑
- 移动端各种滚动场景需求的插件better-scroll
- 给linux服务器添加一块新的磁盘
- OpenCV教程(45) harris角的检测(3)
- java 多线程之:synchronized
- iOS.ObjC.Basic-Knowledge
- vue2.0组件之间的传值
热门文章
- go语言的duck typing
- Computer Vision_33_SIFT:SAR-SIFT: A SIFT-LIKE ALGORITHM FOR SAR IMAGES——2015
- python读txt数据报编码错误
- 若干简单的进程和作业调度的C++模拟程序
- SQL Server CET 通用表表达式 之 精典递归
- java中的io流总结(二)——RandomAccessFile类
- spring实例化二:SimpleInstantiationStrategy
- 大数据之路week05--day01(I/O流阶段一 之File)
- Java8-Executors-No.01
- MVC路由规则进一步了解