微软的IE9会周密匡助Canvas,看来他们会坚决的提升并扶助Canvas技术

 

图片 1

 

 

CharacterClock Canvas 主要利用
fillText来绘制文字,大旨的小时突显算法,来自于OwenTime

 

就像可以看来,Canvas 在这么些用例上,有一些纤维的优势。

CharacterClock Canvas 主要行使
fillText来绘制文字,主旨的命宫突显算法,来自于OwenTime

 

 

ColorfulRing.prototype.drawValue = function (value) {

var angleStart = 1.5 * Math.PI;
var angleEnd = value / this.threshold * 2 * Math.PI + 1.5 * Math.PI;
var clearSafe = 10;

this.context.save();
this.context.clearRect(this.positionX - this.radius - clearSafe, this.positionY - this.radius - clearSafe, (this.radius + clearSafe) *2, (this.radius + clearSafe) * 2);
this.context.beginPath();
this.context.arc(this.positionX, this.positionY, this.radius, angleStart, angleEnd, false);
this.context.lineTo(this.positionX + Math.cos(angleEnd) * this.radiusInner, this.positionY + Math.sin(angleEnd) * this.radiusInner);
this.context.arc(this.positionX, this.positionY, this.radiusInner, angleEnd, angleStart, true);
this.context.lineTo(this.positionX + Math.cos(angleStart) * this.radius, this.positionY + Math.sin(angleStart) * this.radius);
this.context.closePath();

this.context.strokeStyle = this.borderColor;
this.context.lineWidth = this.borderWidth;
this.context.stroke();

this.context.fillStyle = this.fillColor;
this.context.fill();

this.context.fillStyle = this.textColor;
this.context.font = this.textWeight + " " + this.textSize + " " + this.textFamily;
this.context.fillText(value < 10 ? "0" + value : value, this.positionX - parseInt(this.textSize) / 2 - parseInt(this.textSize) / 14, this.positionY + parseInt(this.textSize) / 3 + parseInt(this.textSize) / 14);
this.context.restore();

this.value = value;
}

有如可以看来,Canvas 在那些用例上,有有些微细的优势。

 

 

 

 

图片 2

 

 

 

 

ColorfulClock 的骨干代码是 ColorfulRing的drawValue 方法,使用Canvas 的
path 创设路径并填充路径。

 

 

Canvas是Html5中国和南美洲常主要的Feature 之一,终究Canvas的前景会怎么?
各大巨头拥有差其余想法,微软的IE9会周详协助Canvas, Safari Chrome FireFoxOpera 都已经资助了Canvas, 这一个都以对Canvas利好的新闻,那表达Canvas
将会在主流的浏览器上取得周全的支持。然则不全是对Canvas利好的音讯,Adobe
微软 都有友好成熟的代表技术,Adobe Flash
已经发展了这么长年累月,拥有广阔的用户群,同时Flash的浏览器插件也大约成为了事实标准,同时Flash
拥有无敌的图形处理能力,和可以的IDE开发工具,那都会令人不由的想接纳Flash来完结类似的图样效果。微软的SilverLight
不断的翻新和发展,这也评释了微软想更上一层楼那项技艺的立意。乔布斯不让 IPhone和IPad 资助Flash,可是谷歌最新的Android
2.2早就帮衬了Flash,看来这两家巨头在活动装备上的做法不太一样,可是 Apple
和 谷歌没有看似的代表技术,看来他俩会坚决的前进并协理Canvas技术,那两家巨头会带着Canvas走向何方,Canvas会大方异彩被周边的Web开发人员接收并利用,仍然衰颓的躲在角落里,小编想一段时间后,那些答案会满满的浮出水面吧。
经典的Html5 Canvas 例子已经重重,那里的八个Clock
创意并非来自于本文,ColorfulClock 来自于
http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/demo.html
, CharacterClock 来自于 http://www.j2nete.cn/time/time.html ,
格外喜欢那多少个Clock创意,那里运用Canvas
来兑现了它们,希望各位看官可以喜欢。
实例执行页面: http://www.zhangsichu.com/canvas/canvasclocks.htm ie7
ie8 没有扶助Canvas, 请在 Safari Chrome FireFox 或 Opera
下运作此实例页面。
ColorfulClock

ColorfulRing.prototype.drawValue = function (value) {    var angleStart = 1.5 * Math.PI;  var angleEnd = value / this.threshold * 2 * Math.PI + 1.5 * Math.PI;  var clearSafe = 10;    this.context.save();  this.context.clearRect(this.positionX - this.radius - clearSafe, this.positionY - this.radius - clearSafe, (this.radius + clearSafe) *2, (this.radius + clearSafe) * 2);  this.context.beginPath();  this.context.arc(this.positionX, this.positionY, this.radius, angleStart, angleEnd, false);  this.context.lineTo(this.positionX + Math.cos(angleEnd) * this.radiusInner, this.positionY + Math.sin(angleEnd) * this.radiusInner);  this.context.arc(this.positionX, this.positionY, this.radiusInner, angleEnd, angleStart, true);  this.context.lineTo(this.positionX + Math.cos(angleStart) * this.radius, this.positionY + Math.sin(angleStart) * this.radius);  this.context.closePath();    this.context.strokeStyle = this.borderColor;  this.context.lineWidth = this.borderWidth;  this.context.stroke();    this.context.fillStyle = this.fillColor;  this.context.fill();    this.context.fillStyle = this.textColor;  this.context.font = this.textWeight + " " + this.textSize + " " + this.textFamily;  this.context.fillText(value < 10 ? "0" + value : value, this.positionX - parseInt(this.textSize) / 2 - parseInt(this.textSize) / 14, this.positionY + parseInt(this.textSize) / 3 + parseInt(this.textSize) / 14);  this.context.restore();    this.value = value;  }

图片 3

图片 4

ColorfulClock 的中央代码是 ColorfulRing的drawValue 方法,使用Canvas 的
path 创设路径并填充路径。

图片 5

 

Canvas是Html5中分外关键的Feature 之1、终究Canvas的前途会怎么样?
各大巨头拥有不一致的想法,微软的IE9会周密援救Canvas, Safari Chrome FireFoxOpera 都早已扶助了Canvas, 这么些都是对Canvas利好的音信,那表达Canvas
将会在主流的浏览器上获取完美的支撑。但是不全是对Canvas利好的新闻,Adobe
微软 都有和好成熟的代表技术,Adobe Flash
已经升高了那般长年累月,拥有大规模的用户群,同时Flash的浏览器插件也大约成为了事实标准,同时Flash
拥有强大的图形处理能力,和优质的IDE开发工具,那都会令人不由的想选用Flash来完结类似的图纸效果。微软的SilverLight
不断的更新和进步,那也验证了微软想升高那项技能的决心。Jobs不让 IPhone和IPad 辅助Flash,不过谷歌最新的Android
2.2业已接济了Flash,看来那两家巨头在移动装备上的做法不太相同,然则 Apple
和 谷歌没有类似的替代技术,看来他俩会坚决的开拓进取并协助Canvas技术,那两家巨头会带着Canvas走向何方,Canvas会大方异彩被普遍的Web开发人士接收并运用,依旧颓丧的躲在角落里,作者想一段时间后,这一个答案会满满的浮出水面吧。
经典的Html5 Canvas 例子已经重重,那里的八个Clock
创意并非来自于本文,ColorfulClock 来自于
http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/demo.html
, CharacterClock 来自于 http://www.j2nete.cn/time/time.html ,
非凡喜爱那两个Clock创意,那里运用Canvas
来促成了它们,希望各位看官可以喜欢。
实例执行页面: http://www.zhangsichu.com/canvas/canvasclocks.htm ie7 ie8
没有扶助Canvas, 请在 Safari Chrome FireFox 或 Opera 下运作此实例页面。
ColorfulClock

图片 6

三个Canvas Clock在Chrome下独家和DOM达成做了简要品质相比较:

 


三个Canvas Clock在Chrome下独家和DOM完毕做了简便易行品质比较:

 

相关文章

网站地图xml地图