Html5系列（十九） canvas 弧形描边渐变

来源：互联网发布：java底层书籍编辑：程序博客网时间：2024/05/16 15:43

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>弧形描边渐变</title><script src="js/modernizr.js"></script></head><body><script type="text/javascript">window.addEventListener('load',eventWindowLoaded,false);function eventWindowLoaded(){    canvasApp();}function canvasSupport(){    return Modernizr.canvas;}function canvasApp(){    if(!canvasSupport()){        return;    }else{        var theCanvas = document.getElementById('canvas')        var context = theCanvas.getContext("2d")    }    drawScreen();    function drawScreen(){        var gr = context.createRadialGradient(50,50,25,100,100,100);        //添加颜色端点        gr.addColorStop(0,'rgb(255,0,0)');        gr.addColorStop(.5,'rgb(0,255,0)');            gr.addColorStop(1,'rgb(255,0,0)');                //应用fillStyle生成渐变        context.strokeStyle = gr;        context.arc(100,100,50,(Math.PI/180)*0,(Math.PI/180)*360,false);        context.stroke();                }}</script><canvas id="canvas" width="500" height="500">你的浏览器无法使用canvas小白童鞋；你的支持是我最大的快乐！！</canvas></body></html>

0 0