参考自
https://developer.mozilla.org/en/Canvas_tutorial
<canvas>是HTML5新增加的标签,提供一些简单的方法来完成基本绘图和动画效果,由于标准问题,<canvas>的浏览器支持还不好,至少IE是不支持的(最新的IE9没了解过...),已知支持<canvas>的浏览器有Firefox 1.5+,Opera 9,Safari,Chrome.
一 基础知识
<canvas id="tutorial" width="150" height="150"></canvas>
这是一个canvas的例子,很简单,你可以把它当成一个<img>标签,常用属性就id,width(默认300px),height(默认150px).
如果浏览器不支持canvas,你可以像下面这样:
<canvas id="stockGraph" width="150" height="150">
current stock price: $3.15 +0.15
</canvas>
<canvas id="clock" width="150" height="150">
<img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>
PS:在Firefox中,<canvas .../>是容许的,而Safari不行,为了兼容,还是老老实实的<canvas>..</cavas>吧.
实际上canvas标签是提供一个区域来进行绘图,类似flash中的stage,java中的graphics(不知道比喻对不对,大家看了别骂),为了进行绘图,必须先获得canvas的context(不知道怎么翻译...内容?背景?英语不好,还是不翻译了-_-)
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
以后几乎所有的操作都围绕着这个ctx啦.
大家估计都注意到那个2d了,现在canvas只能2d绘图,据说以后会加入3d功能(flash,sliverlight,javafx要发飙了...)
如果浏览器不支持canvas,最好再加上点判断,比如提醒使用者换个支持canvas的浏览器之类的
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
//绘图代码
} else {
//不支持canvas时的代码
}
下面是一个模板,mozilla官方的,我直接copy下来了,懒得自己敲了,嘿嘿...
<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>
以后的例子都基于这个模板,比如下面这个:
function draw() {
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);
}
}
效果如下:
分享到:
相关推荐
canvas基础教程案例笔记 Canvas: 这是画布标签。 ctx: 画笔 在JS中通过元素.getContext("2d") 获取画笔 坐标系: 普通元素有一个定位坐标系 canvas的坐标系叫做绘图坐标系。 ctx可以认为就是坐标系。 坐标系的原点...
Canvas API(画布)是在HTML5中新增的标签用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap)。 Canvas 对象表示一个 HTML 画布元素 -<canvas>。它没有自己的行为...
原生js+canvas实现截图,实现a标签下载
假设html代码中有一个canvas标签: <canvas id=canvas>你的浏览器不支持canvas!</canvas> 如果你的浏览器是IE8及以下,那么很遗憾,上面那段文字会被渲染出来!而且下面的方法也都不能使用了;所以请使用
canvas 12 HTML5废除的标签 13 XML 15 基本语法 15 DTD校验 16 在xml文件中引入dtd文件的两种方式 17 DTD元素和修饰符 17 元素属性列表说明 17 实体定义分两种 18 使用php对xml文件进行操作 19 CSS 23 ...
<canvas></canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性、方法和事件,其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读《html5与css3权威指南》下面对其中最好玩的canvas的学习做...
Three.js(https://github.com/mrdoob/three.js)是一个JavaScript 3D库,封装了底层的WebGL图形接口,提供简化、高效的三维图形程序开发。...当然,除了WebGL之外,Three.js还提供了基于Canvas、SVG标签的渲染器。
无需任何安装,VectorDraw web library (javascript)就可以运行在任何支持canvas标签和Javascript的主流浏览器(Chrome, Firefox, Safari, Opera, Dolphin, Boat等等)中。这意味着可以用DXF,DWG,DGN,VDML等多种...
初级WEB前端工程师 51课程 20小时20分 ...12.HTML5 Canvas 标签的使用 13.HTML5 Canvas 使用路径 14.HTML5 Canvas 绘制渐变图形与绘制变形图形 15.HTML5 Canvas 图形绘制处理 16.HTML5 Canvas 应用 17.SVG 18.
一个扩展,让您在现场的网页上绘制。 这个扩展允许你在现场的网页上绘制。 您可以使用线(刷)工具,并更改其颜色或大小。 特征: - 刷子 - 橡皮擦工具 ...*更新扩展名后重新加载所有标签。 支持语言:English
Code-Collection 个人博客: 解决方案 windows 调试安卓 webview ...绘制平滑的 canvas 曲线 算法理解 排序 冒泡排序 快速排序 插入排序 选择排序 查找 二分查找 读书笔记 编写可读代码的艺术 其他 笔记 电脑配
java3think in java笔记(111)---打印 (2008-04-24 16:58:28) 标签:杂谈 1 默认情况下,print()方法会调用paint()来完成自己的工作。 2 选择一种字体和大小,决定字符串在页面上存在的位置,并且使用Graphics...
无需任何安装,VectorDraw web library (javascript)就可以运行在任何支持canvas标签和Javascript的主流浏览器(Chrome, Firefox, Safari, Opera, Dolphin, Boat等等)中。这意味着可以用DXF,DWG,DGN,VDML等多种...
该MarkDown文档只记录笔记部分内容,具体的内容见网站内容(有一部分网站上没有因为页面没有完全更新)。 基础 ASP.NET介绍()() 基础 C语言基础()() 运算符表达式与函数()() 选择与循环结构()() ...