| 标题 | html5实现canvas阴影效果示例 |
| 范文 | 在html5中实现canvas阴影效果 代码如下: <!doctype html> <html> <head> <meta http-equiv=x-ua-compatible content=chrome=ie8> <meta http-equiv=content-type content=text/html;charset=utf-8> <title>canvas clip demo</title> <link href=default.css rel=stylesheet /> <script> var ctx = null; // global variable 2d context var imagetexture = null; window.onload = function() { var canvas = document.getelementbyid(text_canvas); console.log(canvas.parentnode.clientwidth); canvas.width = canvas.parentnode.clientwidth; canvas.height = canvas.parentnode.clientheight; if (!canvas.getcontext) { console.log(canvas not supported. please install a html5 compatible browser.); return; } var context = canvas.getcontext('2d'); // section one - shadow and blur context.fillstyle=black; context.fillrect(0, 0, canvas.width, canvas.height/4); context.font = '60pt calibri'; context.shadowcolor = white; context.shadowoffsetx = 0; context.shadowoffsety = 0; context.shadowblur = 20; context.filltext(blur canvas, 40, 80); context.strokestyle = rgba(0, 255, 0, 1); context.linewidth = 2; context.stroketext(blur canvas, 40, 80); // section two - shadow font var hh = canvas.height/4; context.fillstyle=white; context.fillrect(0, hh, canvas.width, canvas.height/4); context.font = '60pt calibri'; context.shadowcolor = rgba(127,127,127,1); context.shadowoffsetx = 3; context.shadowoffsety = 3; context.shadowblur = 0; context.fillstyle = rgba(0, 0, 0, 0.8); context.filltext(blur canvas, 40, 80+hh); // section three - down shadow effect var hh = canvas.height/4 + hh; context.fillstyle=black; context.fillrect(0, hh, canvas.width, canvas.height/4); for(var i = 0; i < 10; i++) { context.shadowcolor = rgba(255, 255, 255, + ((10-i)/10) + ); context.shadowoffsetx = i*2; context.shadowoffsety = i*2; context.shadowblur = i*2; context.fillstyle = rgba(127, 127, 127, 1); context.filltext(blur canvas, 40, 80+hh); } // section four - fade effect var hh = canvas.height/4 + hh; context.fillstyle=green; context.fillrect(0, hh, canvas.width, canvas.height/4); for(var i = 0; i < 10; i++) { context.shadowcolor = rgba(255, 255, 255, + ((10-i)/10) + ); context.shadowoffsetx = 0; context.shadowoffsety = -i*2; context.shadowblur = i*2; context.fillstyle = rgba(127, 127, 127, 1); context.filltext(blur canvas, 40, 80+hh); } for(var i = 0; i < 10; i++) { context.shadowcolor = rgba(255, 255, 255, + ((10-i)/10) + ); context.shadowoffsetx = 0; context.shadowoffsety = i*2; context.shadowblur = i*2; context.fillstyle = rgba(127, 127, 127, 1); context.filltext(blur canvas, 40, 80+hh); } for(var i = 0; i < 10; i++) { context.shadowcolor = rgba(255, 255, 255, + ((10-i)/10) + ); context.shadowoffsetx = i*2; context.shadowoffsety = 0; context.shadowblur = i*2; context.fillstyle = rgba(127, 127, 127, 1); context.filltext(blur canvas, 40, 80+hh); } for(var i = 0; i < 10; i++) { context.shadowcolor = rgba(255, 255, 255, + ((10-i)/10) + ); context.shadowoffsetx = -i*2; context.shadowoffsety = 0; context.shadowblur = i*2; context.fillstyle = rgba(127, 127, 127, 1); context.filltext(blur canvas, 40, 80+hh); } } </script> </head> <body> <h1>html5 canvas</h1> <pre>fill and stroke clip</pre> <div id=my_painter> <canvas id=text_canvas></canvas> </div> </body> </html> |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。