Foundation HTML5 Canvas中的2处错误

     最近公司项目需要使用HTML5
Canvas开发公司大厅展示系统,当然这个项目还在进行中,不过我在进行另外一个新项目,等项目结束时,我将分享项目代码。学习HTML5
canvas主要书籍是《Foundation HTML5 Canvas For Games and
Entertainment》,已经有中文版,名叫《HTML5 Canvas基础教程》。英文说中的实例有2处错误。

     第一处:Chapter4 Gradients小结中,实例代码:

var gradient = context.createLinearGradient(0, 0, 0, canvas.height());
gradient.addColorStop(0, "rgb(0, 0, 0)");
gradient.addColorStop(1, "rgb(255, 255, 255)");
context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width(), canvas.height());

浏览器会提示canvas没有width方法,当然也没有height方法。经过搜索,width和height应该是canvas的属性,应该写canvas.width和canvas.height。

     第二处:在Chapter4 Exporting the canvas as an image中有一段代码

context.save();
context.fillRect(50, 50, 100, 100);
context.fillStyle = "rgb(255, 0, 0)";
context.fillRect(100, 100, 100, 100);
context.restore();
context.fillRect(150, 150, 100, 100);
var dataURL = canvas.get(0).toDataURL();

经过测试,发现canvas.get(0).toDataURL()在Chrome和Firefox都出现错误,提示canvas没有get方法。 查阅官方文档http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html。文档给出了2个方法:url = canvas . toDataURL( [ type, ... ])和canvas . toBlob(callback [, type, ... ]),使用canvas.toDataURL(),程序运行正确。

     关于翻译的问题,因为自己没有买《HTML5
Canvas基础教程》,不知道以上问题,中文翻译作者是否注意到。另外国内很多讲解HTML5教程或者博客中都没有涉及到HTML5
Canvas的旋转矩阵和平移矩阵,特别是使用HTML5
Canvas开发应用或者游戏,这2个矩阵左右很大,巧妙的使用它们可以给apps开发带来很大的帮助。

时间: 2024-11-01 22:42:03

Foundation HTML5 Canvas中的2处错误的相关文章

HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线

  在HTML5 Canvas中,可以用以下方法描画三阶和二阶的贝塞尔曲线: 代码如下: context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) context.quadraticCurveTo(cpx, cpy, x, y) 贝塞尔曲线是在二维平面上由一个"起始点",一个"结束点",以及一个或多个"控制点"定义的曲线.普通的三阶贝塞尔曲线使用两个控制点,而二阶曲线则只使用一个控制点. 要描画二阶贝

HTML5 Canvas中使用用路径描画圆弧

  在Canvas绘图中,"圆弧"既可以是一个整圆,也可以是圆周的一部分. 代码如下: context.arc() context.arc(x, y, radius, startAngle, endAngle, anticlockwise) 在上述方法描述中,x和y定义圆心,radius定义圆周的半径.startAngle和endAngle以极坐标值表示.anticlockwise(布尔值)定义圆弧的方向. 比如,如果我们想描画一个以点(100, 100)为圆心,半径为20的圆周,我们

HTML5 Canvas中绘制矩形实例

让我们来看一下Canvas内置的简单几何图形 - 矩形的绘制.在Canvas中,绘制矩形有三种方法:填充(fillRect).描边(StrokeRect)以及清除(clearRect).当然,我们也可以使用"路径"来描绘包括矩形在内的所有图形. 以下是上述三种方法的API: 1.fillRect(x,y,width,height).绘制一个从(x,y)开始,宽度为width,高度为height的实心矩形. 2.strokeRect(x,y,width,height).绘制一个从(x,y

HTML5 Canvas渐进填充与透明实现图像的Mask效果

详细解释HTML5 Canvas中渐进填充的参数设置与使用,Canvas中透明度的设置与使用,结合渐进填充与透明度支持,实现图像的Mask效果. 一:渐进填充(Gradient Fill) Canvas支持两种渐进填充方式,一种为线性渐进填充(Line Gradient Fill),另外一种称 为经向渐变填充(RadialGradient Fill).其API分别为: createLinearGradient(x1, y1, x2, y2); 其中x1,y1为第一个点坐标,x2,y2为第二个点坐

《HTML5 canvas开发详解(第2版)》——1.6 HTML5 Canvas版“Hello World!”

1.6 HTML5 Canvas版"Hello World!" 如前所述,将Canvas放入HTML5页面时第一件要做的事就是,看看整个页面是否已经加载,并且开始操作前是否所有HTML元素都已展现.在用Canvas处理图像和声音的时候,这点会非常重要. 为此,这里要使用JavaScript的事件.当定义的事件发生时,事件从对象发出.其他对象监听事件,这样就可以基于事件进行处理.用JavaScript可以监听对象的一些常见事件,包括键盘输入.鼠标移动以及加载结束. 第一个需要监听的事件是

《HTML5 Canvas开发详解》——1.5 HTML5 Canvas版“Hello World!”

1.5 HTML5 Canvas版"Hello World!" 如前所述,将Canvas放入HTML5页面时第一件要做的事,就是看看整个页面是否已经加载,并且开始操作前是否所有HTML元素都已展现.用Canvas处理图像和声音的时候这点会非常重要. 为此,这里要使用JavaScript的事件.当定义的事件发生时,事件从对象发出.其他对象监听事件,这样就可以基于事件进行处理.用JavaScript可以监听对象的一些常见事件,包括键盘输入.鼠标移动以及加载结束. 第一个需要监听的事件是wi

HTML5 在canvas中绘制文本附效果图

 一.绘制文本 在绘图环境中提供了两种方法在canvas中绘制文本. strokeText(text,x,y) : 在(x,y)处绘制空心的文本. fillText(text,x,y) : (x,y)处绘制实心的文本. 二.在canvas中绘制文本   代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; char

像素图-html5在canvas中插入图片

问题描述 html5在canvas中插入图片 在canvas中显示图片非常简单.可以通过修正层为图片添加印章.拉伸图片或者修改图片等,并且图片通常会成为canvas上的焦点.用HTML5 Canvas API内置的几个简单命令可以轻松地为canvas添加图片内容. 不过,图片增加了canvas操作的复杂度:必须等到图片完全加载后才能对其进行操作.浏览器通常会在页面脚本执行的同时异步加载图片.如果试图在图片未完全加载之前就将其呈现到canvas上,那么canvas将不会显示任何图片.因此,开发人员

html5游戏开发-关于html5 canvas 绘图动画的问题,我要实现把一张图片绘制在canvas中,然后使其动起来

问题描述 关于html5 canvas 绘图动画的问题,我要实现把一张图片绘制在canvas中,然后使其动起来 情况说明: 图像可以绘制,但是使用setInterval以后就一闪而过,然后没有图像;了 <!doctype html> 我的图片 // 设置绘图环境 var myMap = document.getElementById("Map"); var cxt=myMap.getContext('2d'); // 设置图像位置初始位置的变量 var x=20; var