Canvas

由于浏览器对HTML5标准支持不一致,所以,通常在<canvas>内部添加一些说明性HTML代码,如果浏览器支持Canvas,它将忽略<canvas>内部的HTML,如果浏览器不支持Canvas,它将显示<canvas>内部的HTML:在使用Canvas前,用canvas.getContext来测试浏览器是否支持Canvas:

<!-- HTML代码 -->
<canvas id="test-canvas" width="200" heigth="100">
<p>你的浏览器不支持Canvas</p></canvas>
var canvas = document.getElementById('test-canvas');

if (canvas.getContext) {
alert('你的浏览器支持Canvas!');
} else {
alert('你的浏览器不支持Canvas!');
}

getContext('2d')方法让我们拿到一个CanvasRenderingContext2D对象,所有的绘图操作都需要通过这个对象完成。

var ctx = canvas.getContext('2d');

如果需要绘制3D怎么办?HTML5还有一个WebGL规范,允许在Canvas中绘制3D图形:

gl = canvas.getContext("webgl");

绘制形状

我们可以在Canvas上绘制各种形状。在绘制前,我们需要先了解一下Canvas的坐标系统:

Canvas的坐标以左上角为原点,水平向右为X轴,垂直向下为Y轴,以像素为单位,所以每个点都是非负整数。

CanvasRenderingContext2D对象有若干方法来绘制图形:

var
canvas = document.getElementById('test-shape-canvas'),
ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, 200, 200); // 擦除(0,0)位置大小为200x200的矩形,擦除的意思是把该区域变为透明
ctx.fillStyle = '#dddddd'; // 设置颜色
ctx.fillRect(10, 10, 130, 130); // 把(10,10)位置大小为130x130的矩形涂色
// 利用Path绘制复杂路径:
var path=new Path2D();
path.arc(75, 75, 50, 0, Math.PI*2, true);
path.moveTo(110,75);
path.arc(75, 75, 35, 0, Math.PI, false);
path.moveTo(65, 65);
path.arc(60, 65, 5, 0, Math.PI*2, true);
path.moveTo(95, 65);
path.arc(90, 65, 5, 0, Math.PI*2, true);
ctx.strokeStyle = '#0000ff';
ctx.stroke(path);

以上代码是一个绘制笑脸的代码块。

绘制文本

绘制文本就是在指定的位置输出文本,可以设置文本的字体、样式、阴影等,与CSS完全一致:

var ctx = canvas.getContext('2d');

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = '#666666';
ctx.font = '24px Arial';
ctx.fillStyle = '#333333';
ctx.fillText('带阴影的文字', 20, 40);

Canvas除了能绘制基本的形状和文本,还可以实现动画、缩放、各种滤镜和像素转换等高级操作。如果要实现非常复杂的操作,考虑以下优化方案:

  • 通过创建一个不可见的Canvas来绘图,然后将最终绘制结果复制到页面的可见Canvas中;

  • 尽量使用整数坐标而不是浮点数;

  • 可以创建多个重叠的Canvas绘制不同的层,而不是在一个Canvas中绘制非常复杂的图;

  • 背景图片如果不变可以直接用<img>标签并放到最底层。

示例:获取彩票数据

window.loadStockData = function (r) {
var
NUMS = 30,
data = r.data;
if (data.length > NUMS) {
data = data.slice(data.length - NUMS);
}
data = data.map(function (x) {
return {
date: x[0],
open: x[1],
close: x[2],
high: x[3],
low: x[4],
vol: x[5],
change: x[6]
};
});
window.drawStock(data);
} window.drawStock = function (data) {
} // 加载最近30个交易日的K线图数据:
var js = document.createElement('script');
js.src = 'http://img1.money.126.net/data/hs/kline/day/history/2015/0000001.json?callback=loadStockData&t=' + Date.now();
document.getElementsByTagName('head')[0].appendChild(js);

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

创建 context 对象

var cxt=c.getContext("2d"); 

getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

绘制矩形

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。

绘制线条

cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

绘制圆形

cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,20,20,0,Math.PI*2,true); // 参数分别为:x, y, radius, 起始角度,角度, 是否填充
cxt.closePath();
cxt.fill();

颜色渐变

var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

绘制bitmtp

var img=new Image()
img.src="flower.png"
cxt.drawImage(img, 0, 0); // 后两个参数为起始绘制坐标点

ref: http://www.w3school.com.cn/html5/html_5_canvas.asp

JavaScript H5 Canvas的更多相关文章

  1. H5 canvas绘制出现模糊的问题

    在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...

  2. h5 canvas 小球移动

    h5 canvas 小球移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  3. h5 canvas 画图

    h5 canvas 画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  4. h5 canvas与SVG的比较

    画布 什么是canvas? HTML5的canvas标签使用JavaScript可以在网页上绘制图像,画布为一个矩形. 画布本身没有绘制能力,只能通过脚本来绘制. 画布例子: <canvas i ...

  5. 使用 JavaScript 和 canvas 做精确的像素碰撞检测

    原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...

  6. H5 canvas的 width、height 与style中宽高的区别

    Canvas 的width height属性 1.当使用width height属性时,显示正常不会被拉伸:如下 <canvas id="mycanvas" width=&q ...

  7. javascript的canvas绘图的基本用法

    <canvas>是HTML里面非常强大的元素,利用它结合js可以实现很多动画效果,大大增强交互性.下面,我想用图文并茂的方式阐述一下canvas的绘图机制的基础内容,话不多说,先上代码: ...

  8. 使用javascript和canvas画月半弯

    使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...

  9. JavaScript之canvas

    num.push(x,y); 动画草图(举个栗子,我们把数字“2”给画出来): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

随机推荐

  1. 【ACM/ICPC2013】线段树题目集合(一)

    前言:前一段时间在网上找了一个线段树题目列表,我顺着做了一些,今天我把做过的整理一下.感觉自己对线段树了解的还不是很深,自己的算法能力还要加强.光练代码能力还是不够的,要多思考.向队友学习,向大牛学习 ...

  2. Java学习——数据类型【2】

    1. 对象与类 对象:类的一个实例,有状态和行为. 类:一个模板,描述一类对象的行状态和行为. 2. 类可以包含的变量 类型 局部变量 成员变量 类变量(静态变量) 定义位置 方法.或语句块中 类中, ...

  3. 笔记本开了WIFI之后只能上QQ,上不了网页的解决方法

    前几天拉了宽带之后,开了WIFI,发现WIFI能上网,但是电脑就上不了网页. 把本地连接的DNS指定一下,(电信)指定为202.102.192.68

  4. 用nginx图片缓存服务器

    图片的存储硬件 把图片存储到什么介质上? 如果有足够的资金购买专用的图片服务器硬件或者 NAS 设备,那么简单的很: 如果上述条件不具备,只想在普通的硬盘上存储,首先还是要考虑一下物理硬盘的实际处理能 ...

  5. [Redux] Using withRouter() to Inject the Params into Connected Components

    We will learn how to use withRouter() to inject params provided by React Router into connected compo ...

  6. Cocos2d的特性

    从本质上说,Cocos2d是一个图形引擎,封装了复杂的图形接口,通过抽象出精灵.动作等概念,降低了游戏开发难度,简化了开发过程.Cocos2d-x为保证游戏能方便地移植到不同平台上,又在此基础上做了很 ...

  7. 读者汇app项目案例源码

    这款app是我花一周左右时间做出来的,一款阅读笑话,段子,糗事,脑筋急转弯,神回复,语录,谜语等的休闲娱乐app,用户除了可以浏览他人发布的内容外,自己也可以发布相关内容,和其他人一同分享有趣的内容, ...

  8. Windows7服务无法启动的解决

    这周六,我接到了一个很诡异的案例,表现为任务栏右下角网络连接图标始终为一个红叉,已排除网卡硬件.链路和网卡驱动的问题.主板都新换了一块,可是问题依旧,这无疑将问题的根源指向了操作系统.本想通过网络疑难 ...

  9. (转)一个form表单实现提交多个action

    方法一: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 ...

  10. C#网站实现QQ第三方登陆# C#快速开发教程

    C#网站实现QQ第三方登陆 说起在网站上面可以直接使用QQ登录功能大家并不陌生.但翻其官方提供的SDK包中却没有C#方向的. 但是我们有个牛人叫张善友,做了一个民间SDK.下面我们就是用他所写的SDK ...