/¼òÌåÖÐÎÄ/
/ÖÐÎÄ/
/ÖÐÎÄ/
/ÖÐÎÄ/
/ÖÐÎÄ/
/ÖÐÎÄ/
/ÖÐÎÄ/
/ÖÐÎÄ/
/ÖÐÎÄ/
/ÖÐÎÄ/
HTML FaderÊÇÒ»¸öºÜСµÄ¹¤¾ß£¬»òÕ߸ü׼ȷµÄ˵£¬ËüÊÇÒ»¸öHTML´úÂë²å¼þ³ÌÐò£¬¹¦ÄÜÄظöÖ»ÓÐÒ»¸ö£¬¾ÍÊÇͨ¹ýHTML Fader£¬Äã¿ÉÒÔÔÚHTMLÇáËÉÖÆ×÷É«²Ê½¥±äЧ¹û£¬¶ø²»ÐèÒª¼ÇסÄÇô·±ËöµÄ´úÂ룬Ëü¿ÉÒÔÓ¦ÓÃÔÚÄãµÄÍøÒ³µÄ±êÌâºÍÎı¾ÄÚÈÝ¡£³ÌÐò°üº¬ÁËÒ»¸ö»ù±¾µÄÉè¼Æ½Ó¿Ú£¬Äã±ØÐëÉèÖý¥±äÉ«Öµ£¨¶ÔÓ¦RGBµÄÖµ£©ºÍÎÄ×Ö¡£Ö®ºó£¬Äã¾Í¿ÉÒÔµã»÷Éú³ÉHTMLÒ³ÃæÁË£¬¸´ÖÆÏà¹ØµÄ´úÂëµ½ÄãµÄÍøÒ³±à¼Ò³ÃæÖУ¬ÄÇô£¬Ð§¹ûÁ¢¿Ì¾ÍÄÜÏÔʾ³öÀ´¡£
ÓëHTMLÍÆ×ÓÄú¿ÉÒÔÇáËɵش´½¨HTML»¨ÉÚµÄÑÕÉ«½¥±äЧ¹û£¬ÊÊÓÃÓÚÄúµÄÍøÒ³µÄ±êÌâºÍÎı¾¡£¸Ã·½°¸²ÉÓõĻù±¾Éè¼ÆÖУ¬Äã±ØÐëͬʱÒý½ø»Ò¶ÈÑÕÉ«Öµ£¨RGB£©ºÍÎı¾µÄ½çÃæ¡£
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>½¥±ä</title>
<script language="javascript" type="text/javascript">
window.onload=function(){
var mycan=document.getElementById("myCanvas");
var canxt=mycan.getContext("2d");
//ÔÚÒ»¸ö¾ØÐÎÖг¢ÊÔ×ö½¥±ä
var mylinear=canxt.createLinearGradient(0,0, 150,50);// ´´½¨Ò»¸öÏßÐÔ½¥±ä
mylinear.addColorStop(0,"red");
mylinear.addColorStop(0.5,"yellow");
mylinear.addColorStop(1,"green");
// °Ñ½¥±ä¶ÔÏó¸³Öµ¸øfillstyle,Àí½â(ºÍÌî³äÑÕÉ«ÁªÏµÆðÀ´£¬ÕâÀﲻͬµÄ¾ÍÊÇ´¿É«Óý¥±ä¶ÔÏóÈ¡´úÁË£¬ÎÒÃÇ»¹ÊÇÔÚ¶Ôcanxt²Ù×÷)£¬¹Ø¼ü
canxt.fillStyle=mylinear;
//»æÖƾØÐÎ
canxt.fillRect(0,0,150,50);//±Ø²»¿ÉÉÙ
//ΪÎÄ×Ö´´½¨Ò»¸ö½¥±ä
var linearText=canxt.createLinearGradient(300,50,600,50);
linearText.addColorStop(0,"yellow");
linearText.addColorStop(0.5,"grey");
linearText.addColorStop(1,"red");
canxt.fillStyle=linearText;
canxt.font="30px Arial";
canxt.textBaseline="top";//ÎÄ×Ö¶ÔÆ뷽ʽ£¬ÔÚcanxtÖУ¬Òª¿´Êµ¼ÊЧ¹û
canxt.fillText("Linear canxt!!",300,50);//²ÎÊý±íʾÎÄ×Öx,yÖáµÄλÖÃ
// ¶Ô½ÇÏßÉϵĽ¥±ä
var fillColordiagonal = canxt.createLinearGradient(50,200, 100,450);
// ½¥±äÑÕÉ«
fillColordiagonal.addColorStop(0.2,"red");
fillColordiagonal.addColorStop(0.4,"black");
fillColordiagonal.addColorStop(0.6,"green");
fillColordiagonal.addColorStop(0.75,"yellow");
// °Ñ½¥±ä¶ÔÏó¸³Öµ¸øfillstyle
canxt.fillStyle= fillColordiagonal;
// »æÖƾØÐÎ
canxt.fillRect(50,225, 100,250);
// »æÖƾ¶Ïò½¥±ä
fillColorRadial = canxt.createRadialGradient(450,300,0, 450,300,200);
//¾¶Ïò½¥±ä¡ª¡ªcreateradialGradient(x0,y0,r0,x1,y1,r1)¡ª¡ªÊ¹ÓÃÁù¸ö²ÎÊýÒÔÒ»ÖÖÔ²ÐλòÊÇԲ׶ÐεÄģʽÀ´×éºÏÁ½ÖÖ»ò¶àÖÖÑÕÉ«¡£
//1. (x0,y0)£º Բ׶µÄµÚÒ»¸öÔ²µÄÖÐÐÄ
//2. r0£ºµÚÒ»¸öÔ²µÄ°ë¾¶
//3. (x1,y1)£ºÔ²×¶µÄµÚ¶þ¸öÔ²µÄÖÐÐÄ
//4. r1£ºµÚ¶þ¸öÔ²µÄ°ë¾¶
fillColorRadial.addColorStop(0, "red");
fillColorRadial.addColorStop(0.2, "black");
fillColorRadial.addColorStop(0.4, "green");
fillColorRadial.addColorStop(0.7, "yellow");
canxt.fillStyle = fillColorRadial;
canxt.rect(300,200,500,400);
canxt.fill();
}
</script>
</head>
<body>
<p><canvas id="myCanvas" width="600" height="400"></canvas></p>
</body>
</html>
HTMÎļþÊÇÒ»ÖÖ¾²Ì¬ÍøÒ³Îļþ£¬Ëü²»°üº¬ÈκηþÎñÆ÷¿Ø¼þ£¬¶øÊÇÓÉHTMLÔªËØ×é³É¡£¿Í»§¶Ëä¯ÀÀÆ÷·ÃÎÊ.htmÎļþʱ£¬IIS²»¾¹ý³öÀ´¾ÍÖ±½ÓËÍÍùä¯ÀÀÆ÷£¬ÓÉä¯ÀÀÆ÷½âÊÍÖ´ÐС£¿ÉÔÚʹÓÃhtml±à¼Æ÷»òÕßDreamweaverÀ´½øÐб༡£ÏÂÃæΪ´ó
HTMLÊdz¬Îı¾±ê¼ÇÓïÑÔ£¬´ó¼Òƽ³£¿´µ½µÄÍøÒ³»ù±¾¶¼ÊÇÓÃHTML±àд¶ø³ÉµÄ£¬html±à¼Æ÷ÊDZà¼ÖÆ×÷htmlµÄ¹¤¾ß£¬ÔÚÉ̳ǡ¢ÂÛ̳¡¢²©¿Í¡¢Wiki¡¢µç×ÓÓʼþµÈ»¥ÁªÍøÓ¦ÓÃÉÏ£¬¶¼ÐèҪʹÓõ½HTML±à¼Æ÷£¬¶øÒ»¸öºÃÓõÄhtml±à¼Æ÷²»½öÄÜ
¹ØÓÚÌÚÅ£ | ÁªÏµ·½Ê½ | ·¢Õ¹Àú³Ì | °æȨÉùÃ÷ | ÏÂÔØ°ïÖú(£¿) | ¹ã¸æÁªÏµ | ÍøÕ¾µØͼ | ÓÑÇéÁ´½Ó
Copyright 2005-2022 QQTN.com ¡¾ÌÚÅ£Íø¡¿ °æȨËùÓÐ ¶õICP±¸2022005668ºÅ-1 | ¶õ¹«Íø°²±¸ 42011102000260ºÅ
ÉùÃ÷£º±¾Õ¾·ÇÌÚѶQQ¹Ù·½ÍøÕ¾ ËùÓÐÈí¼þºÍÎÄÕÂÀ´×Ô»¥ÁªÍø ÈçÓÐÒìÒé ÇëÓë±¾Õ¾ÁªÏµ ±¾Õ¾Îª·ÇÓ®ÀûÐÔÍøÕ¾ ²»½ÓÊÜÈκÎÔÞÖúºÍ¹ã¸æ