Óà HTML Canvas ´´½¨Ò»¸öͼƬä¯ÀÀÆ÷
ÑÕ ÁÖ
, Èí¼þ¹¤³Ìʦ, IBM
2009 Äê 12 ÔÂ 10 ÈÕ
HTML
5 ÒýÈëÁËеĵÄÍøÒ³ÔªËØ£º<canvas>¡£Canvas ÊÇһƬ¿Õ°×µÄ»æͼÇøÓò£¬ÍøÒ³¿ª·¢Õß¿ÉÒÔÀûÓà JavaScript
ÔÚ¸ÃÇøÓòÖÐ×ÔÓɵؽøÐÐ 2D »æͼ¡£Canvas ¿ÉÒÔÓÃÓÚäÖȾ»ªÀöµÄÍøÒ³Éè¼Æ½çÃæ¡£±¾ÎÄͨ¹ýÒ»¸öÏêϸµÄʵÀýÀ´ËµÃ÷ÈçºÎÓà Canvas
À´ÖÆ×÷Ò»¸öͼƬµÄä¯ÀÀÆ÷¡£×îÖÕµÄЧ¹û¿ÉÒÔ´ïµ½ Flash ³ÌÐòµÄЧ¹û¡£Í¨¹ý±¾ÎÄ£¬¶ÁÕß¿ÉÒÔÁ˽âÈçºÎʹÓà Canvas
µÄ¸÷ÖÖº¯ÊýÒÔ¼°ÈçºÎÓëÓû§Ê¼þ½øÐн»»¥£¬Êʺ϶ÁÕßΪ Web Éè¼ÆºÍ¼Ü¹¹Ê¦¡£
HTML Canvas ½éÉÜ
HTML5
ÊÇÄ¿Ç°ÕýÔÚÌÖÂÛµÄÐÂÒ»´ú HTML ±ê×¼£¬Ëü´ú±íÁËÏÖÔÚ Web ÁìÓòµÄ×îеķ¢Õ¹·½Ïò¡£ÔÚ HTML5
±ê×¼ÖУ¬¼ÓÈëÁËеĶàÑùµÄÄÚÈÝÃèÊö±êÇ©£¬Ö±½ÓÖ§³Ö±íµ¥ÑéÖ¤£¬ÊÓƵºÍÒôƵ±êÇ©£¬ÍøÒ³ÔªËصÄÍÏק£¬ÀëÏß´æ´¢£¬¹¤×÷Ï̵߳ȵȡ£µ±È»£¬ÆäÖÐÒ»¸ö×îÁîÈ˼¤¶¯µÄÐÂÌØÐÔ
¾ÍÊÇеıêÇ©ÀàÐÍ Canvas£¬¿ª·¢ÈËÔ±¿ÉÒÔͨ¹ý¸Ã±êÇ©£¬ÔÚÍøÒ³ÉÏÖ±½ÓÓýű¾½øÐлæͼ£¬²úÉú¸÷ÖÖ 2D äÖȾµÄЧ¹û¡£ËùÒÔÓÐÈËÔ¤ÑÔ£¬HTML5 ½«ÊÇ
Flash ºÍ Silverlight µÄ“ɱÊÖ”¡£´Ó Firefox 1.5 ¿ªÊ¼¾ÍÒѾ֧³Ö Canvas£¬Safari Ò²ÊǺÜÔç¾Í¿ªÊ¼Ö§³Ö
Canvas¡£ÐµÄä¯ÀÀÆ÷±ÈÈç Chrome Ò²ÊÇ´ÓÒ»¿ªÊ¼¾ÍÖ§³Ö¡£µ«Òź¶µÄÊÇ£¬µ½Ä¿Ç°ÎªÖ¹£¬IE Ò»Ö±²»Ö§³Ö¸Ã±ê×¼¡£
ÏÂÃæÄÚÈÝ
½«Í¨¹ýÈçºÎÓà Canvas À´ÖÆ×÷Ò»¸öͼƬä¯ÀÀÆ÷µÄ¾ßÌåʵÀý£¬À´ËµÃ÷ Canvas µÄ¸÷ÖÖ API£¬ÈçºÎʹÓÃÕâЩ API
ÒÔ¼°ÈçºÎÓ¦Óõ½¹¤³ÌÖÐÈ¥¡£±¾ÎĽ«Ê×ÏȽéÉÜÈçºÎ´´½¨Í¼Æ¬ä¯ÀÀÆ÷µÄÍøÒ³ºÍ JavaScript À࣬½éÉÜÕûÌå½çÃæµÄÉè¼Æ£¬È»ºó½éÉÜÈçºÎÓà Canvas
µÄ API À´»æÖÆ 2D ͼÐΣ¬È»ºó½éÉÜÈçºÎÔÚ Canvas ÉϼÓÔغͻæÖÆͼÏñ£¬½ÓÏÂÀ´±¾Àý»áÔÚͼƬä¯ÀÀÆ÷ÖмÓÈëÆäËû»ùÓÚ Canvas
µÄЧ¹û£¬×îºóÊÇ×ܽáºÍÕ¹Íû¡£
»ØÒ³Ê×
´´½¨Í¼Æ¬ä¯ÀÀÆ÷¿ò¼Ü
´´½¨Îļþ
Ê×ÏÈÎÒÃÇ´´½¨Ò»¸öÐ嵀 html Îļþ thumbnail.html£¬¼ÓÈëÈçÇåµ¥ 1 ËùʾµÄÄÚÈÝ£º
Çåµ¥ 1.thumbnail.html
<!DOCTYPE HTML>
<html>
<head>
<title>Canvas Based Thumbnail</title>
<style type="text/css">
body {
background: black;
color: white;
font: 24pt Baskerville, Times, Times New Roman, serif;
padding: 0;
margin: 0;
overflow: hidden;
}
</style>
<script type="text/javascript" src="thumbnail.js"></script>
</head>
Ïà¹ØÎĵµ£º
aspx Éú³ÉHTML ¾²Ì¬Ò³ £ºhttp://www.cnblogs.com/ejiyuan/archive/2007/11/09/954325.html
cs Ò³£º
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
u ......
ÌØÊâ·ûºÅ
ÃüÃûʵÌå
Ê®½øÖƱàÂë
ÌØÊâ·ûºÅ
ÃüÃûʵÌå
Ê®½øÖƱàÂë
ÌØÊâ·ûºÅ
ÃüÃûʵÌå
Ê®½øÖƱàÂë
Α
Α
Α
Β
Β
Β
Γ
Γ
Γ
Δ
Δ
Δ
Ε
Ε
Ε
Ζ
Ζ
Ζ ......
<Html>
<Head>
<SCRIPT LANGUAGE="JavaScript">
<!--
//¶¨Òå select ÔÖµ
var oldValue,oldText;
//selectÏÂÀ¿òµÄonkeydownʼþ£¬ÐÞ¸ÄÏÂÀ¿òµÄÖµ
function catch_keydown(sel){
switch(event.keyCode) {
case 13: //ȯ ......
PageReleaserÐèÒªÒ»ÖÖHTMLµÄѹËõËã·¨£¬GoogleÁ˺ܾ㬷¢ÏÖÈç¹ûÖ»ÊǼòµ¥È¥³ý¿Õ°×ºÍ×¢Ê͵Ļ°£¬Ê¹ÓÃXLinq¾Í¿ÉÒÔÇáÒ×µÄʵÏÖ ÏÈ¿´¿´MSDNÊÇÔõô˵µÄ£º Ò»ÖÖ³£Ó÷½°¸ÊǶÁÈ¡Ëõ½øµÄ XML£¬ÔÚÄÚ´æÖд´½¨Ò»¸öûÓÐÈκοհ×Îı¾½Úµã£¨¼´²»±£Áô¿Õ°×£©µÄ XML Ê÷£¬¶Ô¸Ã XML Ö´ÐÐijЩ²Ù×÷£¬È»ºó±£´æ´øËõ½øµÄ XML¡£ÔÚÐòÁл¯´ø¸ñʽµÄ XML Ê ......