HTML5 Canvas如何用RadialGradientTexture绘制辐射环纹理图案？
- 内容介绍
- 文章标签
- 相关推荐
本文共计647个文字，预计阅读时间需要3分钟。
原创：HTML5 canvas 渲染环元元素图案RadialGradientTexture。
具体做法如下：
1.在隐形单元（display:none;）上绘制，画出图案单元。
它是一种设置了5种颜色渐变的放射/圆形渐变环。2.在myCanvas上绘制画笔。
原创：HTML5canvas辐射环元素图案RadialGradientTexture。具体做法如下：1.在隐形（display:none;）画布unit上，画出图案单元。它是一个设置了5种颜色的放射状/圆形渐变环。
2.画布myCanvas的画笔为g。调用g的createPattern(img,'repeat')方法，以便在水平和垂直方向重复绘制元素img。
3.通过ticker的自增，使得下次使用颜色数组，均后错一个元素，从而产生动画效果。
演示见：
runjs.cn/detail/niaowhwm
1.[图片] An_Array_Of_Loudspeakers.png
2.[代码][JavaScript]代码
<html> <meta charset="utf-8"> <head> <title>辐射环元素图案RadialGradientTexture</title> <script> function draw_myCanvas(){ var g = document.getElementById("myCanvas").getContext("2d"); drawUnit(); //在不显示的画布 “unit” 上，完成辐射环元素的绘制 var img=document.getElementById("unit");//设 img 为辐射环元素的引用 //设置画笔的填充模式为：在水平和垂直方向重复绘制辐射元素 img var pat=g.createPattern(img,'repeat'); g.rect(0,0,400,300); g.fillStyle=pat; g.fill(); } var ticker=0; var col = new Array("#F0AAFA","#00AAF0","#00AA7F","#008F00","#00AA7F"); var d=0; var inc=true; function drawUnit(){//在不显示的画布 “unit” 上，完成辐射环元素的绘制 var g = document.getElementById("unit").getContext("2d");//取画笔 g g.fillStyle="#0ff"; //设置画布底色 g.fillRect(0,0,100,100); //涂底色 //创建放射状/圆形渐变对象 grd var grd=g.createRadialGradient(50,50,50, 50,50,1); var i=0; do { //为放射状/圆形渐变对象设置5种颜色结构 grd.addColorStop(i/5,col[(i++ + ticker)%col.length]); //% (取余) 确保颜色数组 col 的下标不出界 }while (i<5); //ticker 自增，使得下次使用颜色数组时，均后错一个元素，从而产生动画效果 ticker++; g.fillStyle=grd; //搞定画笔的涂抹内容 g.arc(50,50,49,0,2*Math.PI);//圈定涂抹范围 g.fill();//涂抹(填充)} } function preperation(){ //每半秒钟，调用一次draw_myCanvas() setInterval('draw_myCanvas()',500); } </script> <style> #unit{ display:none; } div{ font-family:"楷体"; font-size:25px; font-weight:900; color:#00F; } #myCanvas{ border:solid brown 10px; } </style> </head> <body onLoad="preperation()"> <div>喇叭阵 The Array of Loudspeakers</div> <canvas id="myCanvas" width="400" height="300" > <p>Your browserdoes not support the canvas element!</p></canvas> <canvas id="unit" width="100" height="100" ></canvas> </body> </html>
本文共计647个文字，预计阅读时间需要3分钟。
原创：HTML5 canvas 渲染环元元素图案RadialGradientTexture。
具体做法如下：
1.在隐形单元（display:none;）上绘制，画出图案单元。
它是一种设置了5种颜色渐变的放射/圆形渐变环。2.在myCanvas上绘制画笔。
原创：HTML5canvas辐射环元素图案RadialGradientTexture。具体做法如下：1.在隐形（display:none;）画布unit上，画出图案单元。它是一个设置了5种颜色的放射状/圆形渐变环。
2.画布myCanvas的画笔为g。调用g的createPattern(img,'repeat')方法，以便在水平和垂直方向重复绘制元素img。
3.通过ticker的自增，使得下次使用颜色数组，均后错一个元素，从而产生动画效果。
演示见：
runjs.cn/detail/niaowhwm
1.[图片] An_Array_Of_Loudspeakers.png
2.[代码][JavaScript]代码
<html> <meta charset="utf-8"> <head> <title>辐射环元素图案RadialGradientTexture</title> <script> function draw_myCanvas(){ var g = document.getElementById("myCanvas").getContext("2d"); drawUnit(); //在不显示的画布 “unit” 上，完成辐射环元素的绘制 var img=document.getElementById("unit");//设 img 为辐射环元素的引用 //设置画笔的填充模式为：在水平和垂直方向重复绘制辐射元素 img var pat=g.createPattern(img,'repeat'); g.rect(0,0,400,300); g.fillStyle=pat; g.fill(); } var ticker=0; var col = new Array("#F0AAFA","#00AAF0","#00AA7F","#008F00","#00AA7F"); var d=0; var inc=true; function drawUnit(){//在不显示的画布 “unit” 上，完成辐射环元素的绘制 var g = document.getElementById("unit").getContext("2d");//取画笔 g g.fillStyle="#0ff"; //设置画布底色 g.fillRect(0,0,100,100); //涂底色 //创建放射状/圆形渐变对象 grd var grd=g.createRadialGradient(50,50,50, 50,50,1); var i=0; do { //为放射状/圆形渐变对象设置5种颜色结构 grd.addColorStop(i/5,col[(i++ + ticker)%col.length]); //% (取余) 确保颜色数组 col 的下标不出界 }while (i<5); //ticker 自增，使得下次使用颜色数组时，均后错一个元素，从而产生动画效果 ticker++; g.fillStyle=grd; //搞定画笔的涂抹内容 g.arc(50,50,49,0,2*Math.PI);//圈定涂抹范围 g.fill();//涂抹(填充)} } function preperation(){ //每半秒钟，调用一次draw_myCanvas() setInterval('draw_myCanvas()',500); } </script> <style> #unit{ display:none; } div{ font-family:"楷体"; font-size:25px; font-weight:900; color:#00F; } #myCanvas{ border:solid brown 10px; } </style> </head> <body onLoad="preperation()"> <div>喇叭阵 The Array of Loudspeakers</div> <canvas id="myCanvas" width="400" height="300" > <p>Your browserdoes not support the canvas element!</p></canvas> <canvas id="unit" width="100" height="100" ></canvas> </body> </html>