Canvas绘图基本用法

：点上面关注免费学习前端知识！

要使用 <canvas> 元素，必须先设置其 width 和 height 属性，指定可以绘图的区域大小。出现在开始和结束标签中的内容是后备信息，如果浏览器不支持 <canvas> 元素，就会显示这些信息。下面就是 <canvas> 元素的例子。

<canvas id=“drawing” width=” 200” height=“200”>A drawing of something.</canvas>

与其他元素一样， <canvas> 元素对应的DOM元素对象也有 width 和 height 属性，可以随意修改。而且，也能通过CSS为该元素添加样式，如果不添加任何样式或者不绘制任何图形，在页面中是看不到该元素的。

要在这块画布（canvas）上绘图，需要取得绘图上下文。而取得绘图上下文对象的引用，需要调用getContext() 方法并传入上下文的名字。传入 “2d” ，就可以取得2D上下文对象。

var drawing = document.getElementById(“drawing”);

//确定浏览器支持<canvas>元素

if (drawing.getContext){

var context = drawing.getContext(“2d”);

//更多代码

}

在使用 <canvas> 元素之前，首先要检测 getContext() 方法是否存在，这一步非常重要。有些浏览器会为HTML规范之外的元素创建默认的HTML元素对象。在这种情况下，即使 drawing 变量中保存着一个有效的元素引用，也检测不到 getContext() 方法。

使用 toDataURL() 方法，可以导出在 <canvas> 元素上绘制的图像。这个方法接受一个参数，即图像的MIME类型格式，而且适合用于创建图像的任何上下文。比如，要取得画布中的一幅PNG格式的图像，可以使用以下代码。

var drawing = document.getElementById(“drawing”);

//确定浏览器支持<canvas>元素

if (drawing.getContext){

//取得图像的数据URI

var imgURI = drawing.toDataURL(“image/png”);

//显示图像

var image = document.createElement(“img”);

i mage.src = imgURI;

document.body.appendChild(image);

}

默认情况下，浏览器会将图像编码为PNG格式（除非另行指定）。Firefox和Opera也支持基于 “image/jpeg” 参数的JPEG编码格式。由于这个方法是后来才追加的，所以支持 <canvas> 的浏览器也是在较新的版本中才加入了对它的支持，比如IE9、Firefox 3.5和Opera 10。

完

看前端技术文章，就在Web前端精髓

Canvas绘图基本用法相关推荐

canvas 绘制直线并选中_javascript自学记录：canvas绘图
由于学习js是为爬虫服务,所以canvas绘图学习并不完整. 第15章使用Canvas绘图 15.1 基本用法 HTML文件中需要有canvas元素,两标签之间的文字是浏览器不支持时显示的. A d ...
JavaScript：使用Canvas绘图
1.基本用法要使用<canvas>元素,必须先设置其width和height属性,指定可以绘图的区域大小,出现在开始后结束标签中的内容是后备信息,如果浏览器不支持<canvas ...
JavaScript 使用Canvas绘图
JavaScript 使用Canvas绘图 <canvas>元素负责在页面中设定一个区域,可以通过JavaScript动态地在这区域中绘制图形. 一.基本用法 1.先设置width和he ...
如何使用canvas绘图
这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [如何使用can ...
Android中Canvas绘图之Shader使用图文详解
概述我们在用Android中的Canvas绘制各种图形时,可以通过Paint.setShader(shader)方法为画笔Paint设置shader,这样就可以绘制出多彩的图形.那么Shader是什 ...
H5 canvas 绘图
H5的canvas绘图技术 canvas元素是HTML5中新添加的一个元素,该元素是HTML5中的一个亮点.Canvas元素就像一块画布,通过该元素自带的API结合JavaScript代码可以绘制各种 ...
Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
[转]基于Prototype，利用Canvas绘图实现的web流程图设计器（原型）
基于Prototype,利用Canvas绘图实现的web流程图设计器(原型) 关键字: javascript prototype script.aculo.us canvas 流程图 web画线刚才 ...
每天一个JavaScript实例-canvas绘图
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

Canvas绘图基本用法

Canvas绘图基本用法相关推荐

最新文章

热门文章