html5中的canvas属性一些简单例子

来源：互联网发布：淘宝差评会被寄编辑：程序博客网时间：2024/06/07 11:07
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>canvas</title></head><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">    您的浏览器不支持 HTML5 canvas 标签。</canvas><script>    /*//画一个矩形    var c=document.getElementById("myCanvas");    var ctx=c.getContext("2d");    ctx.fillStyle="#FF0000";    ctx.fillRect(0,0,100,100);*/    //在canvas上画线    /*var c = document.getElementById("myCanvas");    var ctx = c.getContext("2d");    ctx.moveTo(0,0);    ctx.lineTo(200,200);    ctx.stroke();*/    //在canvas上画圆  arc(x,y,r,start,stop)    /*var c = document.getElementById("myCanvas");    var ctx = c.getContext("2d");    ctx.beginPath();    ctx.arc(95,50,40,0,2*Math.PI);    ctx.stroke();*/    //使用canvas绘制文本    /*var c = document.getElementById("myCanvas");    var ctx = c.getContext("2d");    ctx.font = "30px Arial";    /!*ctx.fillText("hello ",10,50);   //实心文字*!/    ctx.strokeText("hello",10,50);  //空心文字*/    //canvas中颜色渐变    /*var c = document.getElementById("myCanvas");    var ctx = c.getContext("2d");    //创建渐变    var grd = ctx.createLinearGradient(0,0,200,0);    grd.addColorStop(0,"red");    grd.addColorStop(1,"white");    //填充渐变    ctx.fillStyle = grd;    ctx.fillRect(10,10,150,80);*/    //创建一个径/圆渐变，使用渐变填充矩形    var c = document.getElementById("myCanvas");    var ctx = c.getContext("2d");    //创建渐变    var grd = ctx.createRadialGradient(75,50,5,90,60,100);    grd.addColorStop(0,"red");    grd.addColorStop(1,"white");    //填充渐变    ctx.fillStyle = grd;    ctx.fillRect(10,10,150,80);</script></body></html>
阅读全文
0 0