Canvas is one of the most important features in Html5. What is the future of Canvas? Various giants have different ideas. Microsoft's IE9 will fully support Canvas, and Safari Chrome FireFox Opera has already supported Canvas. These are good news for Canvas, which indicates that Canvas will be fully supported on mainstream browsers. However, it is not all good news for Canvas. Adobe Microsoft has its own mature alternative technology, Adobe Flash has developed for so many years and has a large user base. At the same time, Flash's browser plug-in has almost become the de facto standard. At the same time, Flash has powerful graphics processing capabilities and good IDE development tools, which will make people want to choose Flash to achieve similar graphics effects. Microsoft's SilverLight is constantly updated and developed, which also shows Microsoft's determination to develop this technology. Jobs did not allow iPhone and iPad to support Flash, but Google's latest Android 2.2 has already supported Flash. It seems that the two giants have different practices on mobile devices, but Apple and Google do not have similar alternative technologies. It seems that they will unswervingly develop and support Canvas technology. Where will the two giants lead Canvas, Canvas will be generously accepted and adopted by the vast number of web developers, but it is still hiding in the corner. I think that after a period of time, the answer will fully surface.
There are many classic Html5 Canvas examples. The two Clocks here are not from this article, but ColorfulClock is from http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/demo.html , CharacterClock from http://www.j2nete.cn/time/time.html I like these two Clock ideas very much. Here we use Canvas to implement them. I hope you can like them.
Instance Execution Page: http://www.zhangsichu.com/canvas/canvasclocks.htm IE7 ie8 does not support Canvas. Please run this instance page under Safari Chrome FireFox or Opera.
ColorfulClock
The core code of ColorfulClock is ColorfulRing's drawValue method, which uses Canvas's path to create a path and fill the path.
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; }
CharacterClock Canvas mainly uses fillText to draw text. The core time display algorithm comes from OwenTime 。
The two Canvas Clocks are roughly compared with the DOM implementation under Chrome:
It seems that Canvas has a small advantage in this use case.
