HTML5学习笔记14-Canvas绘制渐变图形与绘制变形图形

    xiaoxiao2021-03-26  8

    1、线性渐变

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>线性渐变</title> </head> <body οnlοad="draw()"> <canvas id="canvas" width="500 " height="500"></canvas> <script> function draw(){ var canvas=document.getElementById("canvas"); if(canvas==null){ return false; } var context=canvas.getContext("2d"); var gl=context.createLinearGradient(0,0,0,300); gl.addColorStop(0,"rgb(255,255,0)"); gl.addColorStop(1,"rgb(0,255,255)"); context.fillStyle=gl; context.fillRect(0,0,500,500); } </script> </body> </html>

    2、径向渐变

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>径向渐变</title> </head> <body οnlοad="draw()"> <canvas id="canvas" width="500" height="500"></canvas> <script> function draw(){ var canvas=document.getElementById("canvas"); if(canvas==null){ return false; } var context=canvas.getContext("2d"); var g1=context.createRadialGradient(400,0,0,400,0,400); g1.addColorStop(0.1,"rgb(255,255,0)"); g1.addColorStop(0.3,"rgb(255,0,255)"); g1.addColorStop(1,"rgb(0,255,255)"); context.fillStyle=g1; context.fillRect(0,0,500,500); context.fill(); } </script> </body> </html>

    3、绘制变形图形

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>变形图形</title> </head> <body οnlοad="draw()"> <!--平移translate(x,y)--> <!--缩放scale(x,y)--> <!--旋转rotate(deg)--> <canvas id="canvas" width="500" height="500"></canvas> <script> function draw(){ var canvas=document.getElementById("canvas"); if(canvas==null){ return false; } var context=canvas.getContext("2d"); context.fillStyle="#eeeeee"; context.fillRect(0,0,500,500); context.translate(200,50); context.fillStyle="rgba(255,0,0,0.25)"; for(var i=0;i<50;i++){ context.translate(25,25); context.scale(0.95,0.95); context.rotate(Math.PI/10); context.fillRect(0,0,100,50); } } </script> </body> </html>
    转载请注明原文地址: https://ju.6miu.com/read-600282.html

    最新回复(0)