Canvas绘图——基本用法

html 专栏收录该内容
4 篇文章 0 订阅

Canvas绘图——基本用法

一 、相关补充

  1. HTML5添加的<canvas> 元素负责在页面中设定一个区域,然后可以通过JavaScript动态地在这个区域中绘制图形
  2. <canvas> 最早由苹果公司推出的,当时主要用在其Dashboard微件中。很快,HTML5加入了这个元素,主要浏览器也迅速开始支持它。IE 9+、Firefox 1.5+、Safari 2+、Opera 9+、Chrome、IOS版Safari以及Android版WenKit都早某种程度上支持<canvas>
  3. 与浏览器环境中的其他组件类似,<canvas> 由几组API构成,但并非所有浏览器都支持所有这些API
  4. 除了具备基本绘图能力的2D上下文,<canvas> 还建议了一个名为WebGL的3D上下文
  5. 目前,支持<canvas> 的浏览器支持2D上下文及文本API,但对WebGl的支持还不够好
  6. Firefox 4+和Chrome支持WebGL规范的早期版本,但一些老版本大操作系统,比如吧Windows XP,由于缺少必要的绘图程序,即便安装了这两款浏览器也没用

二、基本用法

(一).相关概念

  1. 要使用<canvas> 元素,必须先设置其widthheight属性,指定可以绘图的区域大小
  2. 出现在开始和结束标签中的内容是后备信息,如果浏览器不支持<canvas> 元素,就会显示这些信息
  3. 与其他元素一样,<canvas> 元素对应的DOM元素对象也有width和height属性,可以随意修改
  4. 而且也能通过CSS为该元素添加样式,如果不添加任何样式或者不绘制任何图形,在页面中是看不到该元素的
  5. 要在画布上绘图,需要取得绘图上下文。而取得绘图上下文对象的引用,需要调用getContext()方法并传入上下文的名字。传入"2d",就可以取得2D上下文对象
var drawing=document.getElementById("drawing");

//确定浏览器支持 <canvas> 元素
if(drawing.getContext){
	var context=drawing.getContext("2d");
	//更多代码
}
/*在使用<canvas>元素之前,首先要检测getContext()方法是否存在,这一步非常重要。有些浏览器会为HTML规范之外的元素创建默认的HTML元素对象。在这种情况下,即使drawing变量中保存着一个有效的元素引用,也检测不到getContext()方法*/

(二).toDataURL()

  1. 使用toDataURL()方法,可以导出<canvas>元素上绘制的图像
  2. 这个方法接收一个参数,即图像的MIME类型格式,而且适用于创建图像的任何上下文
  3. 如果绘制到画布上的图像源自不同的域,toDataURL()方法会抛出错误
var drawing=document.getElementById("drawing");

//确定浏览器支持 <canvas> 元素
if(drawing.getContext){
	//取得图像的数据URL
	var imgURL=drawing.toDataURL("image/png");
	
	//显示图像
	var image=document.createElement("img");
	img.src=imgURL;
	document.body.appendChild(image);
}
/*默认情况下,浏览器会将图像编码为PNG格式(除非另行指定)。Firefox和OPera也支持机遇和"image/jpeg"参数的JPEG编码格式。由于这个方法是后来才追加的,所以支持<canvas>的浏览器也是在较新的版本中才加入了对它的支持*/

源自
源于整理《JavaScript高级程序设计》

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

杏仁璐

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值