Peut-?tre que je n'ai pas ? parler davantage, tout le monde savait HTML5 et Flash - ces deux technologies Web sont d?velopp?es et am?lior?es pour attirer davantage de soins de d?veloppeurs web Aujourd'hui, dans cette toile post tutorial JavaScript, Je suis heureux de vous pr?senter un match de HTML5 et Flash en simple JavaScript dessin rondes: la cr?ation d'une ic?ne d'avertissement par des lignes de code Les bras des deux deux courses: HTML5 aide ?l?ment canvas avec le soutien de JavaScript, Flash avec Action Script 3 Bien que l'auteur n'a pas d?montr? que la technologie a gagn?, mais personnellement, selon les images finales, ACC @ nk pense que c'est parce que HTML5 la couleur de photos faites par HTML5 est plus r?el que Flash, mais ce n'est qu'un tr?s simple toile HTML5 test et ces technologies web sont encore am?lior?s.

• Demo
• Agrandir
• Recharger
• New window

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

References

• Google's HTML5 playground
• Timeline of HTML5 and CSS3 browser support

• Code
• Imprimer

• Commentaire (0)
• Écrire

par Avant-première

Annuler réponse

Écrivez votre commentaire

Commentaires du client sera publié avant previwed
Donnez votre email réel pour obtenir des réponses notification ou commentaire sera supprimé

Votre nom *
Votre e-mail^g *
Votre site

Comment's Titre

J'assure à 100% je suis humain réel
Je le répète, je ne suis pas bot

• Sent (0)
• Nouveau