说说 canvas 的基本用法
来源:互联网 发布:淘宝客优惠券口令推广 编辑:程序博客网 时间:2024/06/05 22:53
要使用 <canvas>
元素,要先设置 width 和 height,它们决定了绘图的区域大小。在开始和结束标签中是后备信息,如果浏览器不支持 canvas,就会显示这些信息:
<canvas id="drawing" width="200" height="200">A drawing of something.</canvas>
也可以为 canvas 元素添加 CSS 样式,如果不添加样式或者不绘制任何图形,是看不到任何东西的。
要在 canvas 上绘图,就必须取得 2D 上下文对象:
var drawing = document.getElementById("drawing");if (drawing.getContext) {//确定浏览器支持 canvas ...}
toDataURL() 方法会导出 <canvas>
元素上绘制的图像。它接受一个图像的 MIME 类型的参数,比如这里要取得画布上的一幅 PNG 格式的图像:
<script type="text/javascript"> var drawing = document.getElementById("drawing"); if (drawing.getContext) {//确定浏览器支持 canvas //取得图像的数据 URI var imgURI = drawing.toDataURL("image/png"); //显示图像 var image = document.createElement("img"); image.src = imgURI; document.body.appendChild(image); }</script>
默认情况下,浏览器会把图像编码为 PNG 格式。IE9、Firefox 3.5 和 Opera 10 也支持 “image/jpeg” 的编码格式。
注意: 如果绘制到画布上的图像来自于不同的域,那么使用 toDataURL() 方法会抛出错误!
阅读全文
0 0
- 说说 canvas 的基本用法
- canvas的基本用法
- Canvas的基本用法
- Canvas 的绘制图表的基本用法
- Canvas 的绘制图表的基本用法
- javascript中canvas绘图的基本用法
- Canvas基本用法
- 学习:Canvas基本用法
- Canvas 基本用法
- Canvas绘图基本用法
- Canvas教程 Canvas tutorial之基本用法
- 说说ContentProvider的用法
- 说说ContentProvider的用法
- Canvas 基本用法学习笔记
- HTML5 绘制图形 Canvas 与 SVG 的基本用法
- 在浏览器上画图(canvas的基本用法)
- canvas的基本使用
- Canvas基本矩形的
- JBOSS启动报错Given parent is not an ancestor of this virt
- 一起做RGB-D SLAM(1)
- 顺序表
- 理解javascript闭包
- jackson注解
- 说说 canvas 的基本用法
- 小仙女-js基础精华
- html拾遗
- Java定时任务调度工具详解之Quartz篇
- yum-本地源设置、更改源配置
- CentOS7安装部署MySql5.7.15
- ORACLE 语句字段含有数字,按数字排序
- KANO模型以及产品经理的素质模型
- 洛谷 P1908 逆序对