14/02/2011
0
Perhaps I did not to talk more, everyone knew HTML5 and Flash - these two web technologies are developed and improved to attract more attentions from web developers.
Today in this canvas tutorial JavaScript post, I'm pleasure to present you a match of HTML5 and Flash in simple JavaScript drawing round: creating a warning icon by code lines. The arms of both two races: HTML5 using canvas element with support from JavaScript, Flash with Action Script 3.
Although the author did not show which technology won, but personally according to final images, jsB@nk think it's HTML5 because the color of picture made by HTML5 is more real than Flash; however, this is just a very simple HTML5 canvas test and these web technologies are still improved. Please go to the full post page for detailed results.
- Demo
- Enlarge
- Reload
- New window
Generate your business videos by AI with voice or just text
Your first FREE AI Video App! Automate Your First AI Video. Create Your Professional Video In 5 Minutes By AI No Equipment Or Video Editing Skill Requred. Effortless Video Production For Content Marketers.
Create the Inner Stroke Path
Next we create a smaller triangle within our first triangle. Later we will stroke it and utilize standard properties to curve the border of our stroke for us.
// Create the inner border path context.beginPath(); context.moveTo(canvasWidth/2, this.padding + this.lineWidth); context.lineTo((canvasWidth + this.width)/2 - this.lineWidth, this.padding + this.height - this.lineWidth/2); context.lineTo((canvasWidth - this.width)/2 + this.lineWidth, this.padding + this.height - this.lineWidth/2); context.lineTo(canvasWidth/2, this.padding + this.lineWidth); context.closePath();
// Create the inner border path var strokePath:GraphicsPath = new GraphicsPath(new Vector.(), new Vector. ()); strokePath.moveTo(canvasWidth/2, padding + innerBorder); strokePath.lineTo((canvasWidth + iconWidth)/2 - innerBorder, padding + iconHeight - innerBorder/2); strokePath.lineTo((canvasWidth - iconWidth)/2 + innerBorder, padding + iconHeight - innerBorder/2); strokePath.lineTo(canvasWidth/2, padding + innerBorder);
Bang!
With any icon, we have a message. The warning standard is an exclamation point (aka a "bang" character) which we add in the center of our icon. We could use a text representation but we will not do that for a various reasons (the user might not have that font, the size cost for embedding an entire typeface just for one character is not worth it, etc.)
// Create the text (aka bang) path context.beginPath(); // Top context.moveTo(canvasWidth/2 - 8, this.padding + 45); context.quadraticCurveTo(canvasWidth/2, this.padding + 35, canvasWidth/2 + 8, this.padding + 45); // Bottom context.lineTo(canvasWidth/2 + 3, this.padding + 66); context.quadraticCurveTo(canvasWidth/2, this.padding + 78, canvasWidth/2 - 3, this.padding + 66); // Close path context.lineTo(canvasWidth/2 - 8, this.padding + 44);
// Create the text (aka bang) path var bangPath:GraphicsPath = new GraphicsPath(new Vector.(), new Vector. ()); // Top bangPath.moveTo(canvasWidth/2 - 8, padding + 45); bangPath.curveTo(canvasWidth/2, padding + 35, canvasWidth/2 + 8, padding + 45); // Bottom bangPath.lineTo(canvasWidth/2 + 3, padding + 66); bangPath.curveTo(canvasWidth/2, padding + 78, canvasWidth/2 - 3, padding + 66); // Close path bangPath.lineTo(canvasWidth/2 - 8, padding + 44);
Again the major difference between the two approaches are the methods quadraticCurveTo versus curveTo.
Exclamation 'Point'
To finish our bang character, we add a circle:
// Draw dot var radius = 5; var centerX = canvasWidth/2; var centerY = this.padding + 84; context.moveTo(centerX, centerY - radius); context.quadraticCurveTo(centerX + radius, centerY - radius, centerX + radius, centerY); context.quadraticCurveTo(centerX + radius, centerY + radius, centerX, centerY + radius); context.quadraticCurveTo(centerX - radius, centerY + radius, centerX - radius, centerY); context.quadraticCurveTo(centerX - radius, centerY - radius, centerX, centerY - radius); context.closePath();
// Draw Dot var radius:Number = 5; var centerX:Number = canvasWidth/2; var centerY:Number = padding + 84; bangPath.moveTo(centerX, centerY - radius); bangPath.curveTo(centerX + radius, centerY - radius, centerX + radius, centerY); bangPath.curveTo(centerX + radius, centerY + radius, centerX, centerY + radius); bangPath.curveTo(centerX - radius, centerY + radius, centerX - radius, centerY); bangPath.curveTo(centerX - radius, centerY - radius, centerX, centerY - radius);
JavaScript and ActionScript have more efficient ways to create circles including the methods arc and drawCircle respectively.
Draw Inside the Lines
The paths are complete:
In JavaScript and ActionScript and you won't actually see the path until assign a fill or stroke to them. The following code defines what the fills and strokes will look like:
// Background Gradient Fill var backFill = context.createLinearGradient(0, this.padding, 0, this.padding + this.height); backFill.addColorStop(0.55, this.primaryColor); backFill.addColorStop(0.55, this.tertiaryColor); backFill.addColorStop(1, this.secondaryColor + " transparent"); // Text and Stroke Fill bangFill = context.createLinearGradient(0, this.padding, 0, this.padding + this.height); bangFill.addColorStop(0, "#555"); bangFill.addColorStop(1, "#333"); // Stroke context.lineWidth = this.lineWidth; context.lineJoin = "round"; context.strokeStyle = bangFill;
// Background Gradient Fill var backFill:GraphicsGradientFill = new GraphicsGradientFill(); backFill.colors = [secondaryColor, tertiaryColor, primaryColor]; backFill.ratios = [iconHeight/2, iconHeight, iconHeight]; backFill.matrix = new Matrix(); backFill.matrix.createGradientBox(iconWidth, iconHeight, 3*Math.PI/2, 0, padding); // Text and Stroke Fill var bangFill:GraphicsGradientFill = new GraphicsGradientFill(); bangFill.colors = [0x555555, 0x333333]; bangFill.matrix = new Matrix(); bangFill.matrix.createGradientBox(iconWidth, iconHeight, Math.PI/2, 0, padding); // Transparent Fill var transparentFill:GraphicsSolidFill = new GraphicsSolidFill(); transparentFill.alpha = 0; // Stroke var stroke:GraphicsStroke = new GraphicsStroke(lineWidth); stroke.joints = JointStyle.ROUND; stroke.fill = bangFill;
Draw
// Fill the background path context.fillStyle = backFill; context.fill(); // Stroke the inner border path context.stroke(); // Fill the bang path context.fillStyle = bangFill; context.fill();
// Fill and stroke all paths var iconGraphics:Vector.= new Vector. (); iconGraphics.push(backFill, trianglePath, bangFill, bangPath, transparentFill, stroke, strokePath); graphics.drawGraphicsData(iconGraphics);
JavaScript
applies the path fills on the HTML5 Canvas as each one is completed.
ActionScript 3 can apply all path fills and strokes all at one time
using the method drawGraphicsData.
We see the results below:
A Subtle Shadow
We are almost there, but there is something missing. Let's add a subtle shadow.
// Add a subtle shadow context.shadowOffsetX = 0; context.shadowOffsetY = 0; context.shadowBlur = 10; context.shadowColor = "#000000";
// Add a subtle shadow filters = new Array(new DropShadowFilter(0, 0, 0x000000, 1, 10, 10));
Final Images
Download Source
- Download HTML5 JavaScript (Includes html and js files): Warning-Icon-HTML5.zip
- Download Flash ActionScript (Includes fla, swc, and as files): Warning-Icon-Flash.zip
References
by Preview- Sent (0)
- New
Author:
Previews:
Comment:
Votes:
Sent:
Size:
Rank:
William Malone [more]
49,462
0
0
0
4.1 KBytes
0 votes / 49,462 previews / 0 comment
14/02/2011
Perhaps I did not to talk more, everyone knew HTML5 and Flash - these two web technologies are developed and improved to...JavaScript in HTML5 vs ActionScript 3 in Flash in Drawing Match - Who Win? - JavaScript in HTML5 vs ActionScript 3 in Flash in Drawing Match - Who Win?
