14/02/2011
0
Có lẽ không cần phải giới thiệu nhiều thì mọi người cũng biết khá nhiều thông tin về HTML5 và Flash - hai công nghệ này đang này càng được phát triển và hoàn thiện để giành lấy sự ủng hộ của các nhà phát triển web.
Trong bài viết hôm nay, jsB@nk xin giới thiệu với bạn cuộc so găng của hai công nghệ web này trong một trận thi đấu vẽ vời đơn giản: tạo ảnh một biểu tượng cảnh báo với các dòng mã lệnh. Trang bị vũ khí của hai bên: HTML5 dùng tập lênh canvas với sự hỗ trợ của JavaScript, Flash với sự hỗ trợ của ActionScript 3.
Mặc dù tác giả không cho biết công nghệ nào thắng cuộc so găng này, nhưng riêng jsB@nk, dựa trên kết quả cuối cùng, cảm nhận rằng hình ảnh do HTML5 tạo ra có màu sắc trông thực hơn; nhưng đây cũng chỉ là một phép thử đơn giản và hai công nghệ này vẫn còn đang trong quá trình hoàn thiện. Bạn vui lòng vào trang trong để xem chi tiết cuộc so găng này.
- Demo
- Phóng to
- Tải lại
- Cửa sổ mới
Tạo video bằng AI chỉ với giọng nói hoặc văn bản
Ứng dụng video AI MIỄN PHÍ hàng đầu của bạn! Tự động hóa video AI đầu tiên của bạn. Tạo Video Chuyên Nghiệp Của Bạn Trong 5 Phút Bằng AI Không Cần Thiết Bị Hoặc Kỹ Năng Chỉnh Sửa Video. Sản xuất video dễ dàng dành cho nhà tiếp thị nội dung.
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
bởi Xem- Lượt gửi (0)
- Mới
Tạo video doanh nghiệp của bạn bằng AI chỉ với giọng nói hoặc văn bản
chatGPTaz.com
Nói chuyện với ChatGPT bằng ngôn ngữ mẹ đẻ của bạn
Ứng dụng AI Video
Ứng dụng video AI MIỄN PHÍ đầu tiên của bạn
Deepfake Video
Deepfake AI Video Maker
Deepfake
Deepfake AI Video Maker
AI Deep Fake
Deepfake AI Video Maker
AI Voice Generator
Most Realistic Text to Speech AI Solutions
AI Voice Generator
Most Realistic Text to Speech AI Solutions
AIvidio
AI Video Mobile Solutions
AIvideos
AI Video Platform & Solutions
AIvedio
AI Video App Maker
Artificial General Intelligence
Ai and higher level Artificial General Intelligence (AGI)
Artificial General Intelligence
Ai and higher level Artificial General Intelligence (AGI)
Faceswap AI trực tuyến
Đổi mặt Video, Ảnh & GIF ngay lập tức với Công cụ AI mạnh mẽ - Faceswap AI Trực tuyến MIỄN PHÍ
Faceswap AI trực tuyến
Đổi mặt Video, Ảnh & GIF ngay lập tức với Công cụ AI mạnh mẽ - Faceswap AI Trực tuyến MIỄN PHÍ
Faceswap AI trực tuyến
Đổi mặt Video, Ảnh & GIF ngay lập tức với Công cụ AI mạnh mẽ - Faceswap AI Trực tuyến MIỄN PHÍ
Powerful AI Presentation PPT Maker for FREE
Build an impressive presentation with our free online AI presentation app
Your next top AI Assistant
Claude AI, developed by Anthropic
Your next top AI Assistant
Claude AI, developed by Anthropic
Temu tặng $500 cho người dùng mới
Claim Free Temu $500 Credit via Affiliate & Influencer Program
Tín dụng quảng cáo TikTok miễn phí
Làm chủ quảng cáo TikTok cho hoạt động tiếp thị doanh nghiệp của bạn
Tín dụng quảng cáo TikTok miễn phí
Làm chủ quảng cáo TikTok cho hoạt động tiếp thị doanh nghiệp của bạn
Dall-E-OpenAI.com
Tự động tạo ra hình ảnh sáng tạo với AI
chatGPT4.win
Nói chuyện với ChatGPT bằng ngôn ngữ mẹ đẻ của bạn
Sản phẩm AI đầu tiên của Elon Musk - Grok/UN.com
Nói chuyện với Grok AI Chatbot bằng ngôn ngữ của bạn
Công cụ.win
Mở trung tâm công cụ miễn phí để mọi người sử dụng với hàng trăm công cụ
GateIO.gomymobi.com
Airdrop miễn phí để nhận, chia sẻ lên đến 150.000 đô la cho mỗi dự án
iPhoneKer.com
Tiết kiệm tới 630$ khi mua iPhone 16 mới
Mua Robot Tesla Optimus
Đặt mua Tesla Bot: Robot Optimus Gen 2 ngay hôm nay với giá dưới 20.000 đô la
Cool Domains for Sale!
Tác giả:
Lượt xem:
Lời bình:
Lượt đánh giá:
Lượt gửi:
Kích thước:
Thứ hạng:
William Malone [more]
49,198
0
0
0
4.1 KBytes
0 lượt đánh giá / 49,198 lượt xem / 0 lời bình
14/02/2011
Có lẽ không cần phải giới thiệu nhiều thì mọi người cũng biết khá nhiều thông tin về HTML5 ...JavaScript với HTML5 vs ActionScript 3 với Flash trong đồ họa - Ai sẽ thắng? - JavaScript với HTML5 vs ActionScript 3 với Flash trong đồ họa - Ai sẽ thắng?
