canvas一周一练 -- canvas绘制马尾图案（5） - 张不丢_H5之家

HTML5技术

canvas一周一练 -- canvas绘制马尾图案（5） - 张不丢

字号+ 作者：H5之家来源：H5之家 2017-08-07 14:02 我要评论( )

运行效果： !DOCTYPE htmlhtmlhead/headbodycanvas id=width=height=A drawing of someing!/canvasscript type= ); if (drawing.getContext) { context = drawing.getContext( ); addZero = function(str){ + str;}; var randomColor = function(redValue, g

运行效果：

<!DOCTYPE html> <html> <head> </head> <body> <canvas id=width=height=>A drawing of someing!</canvas> <script type=> 　　　　 ); if(drawing.getContext) { context = drawing.getContext(); addZero = function(str){ +str; }; var randomColor = function(redValue, greenValue, blueValue){ redValue = addZero(redValue.toString(16)); greenValue = addZero(greenValue.toString(16)); blueValue = addZero(blueValue.toString(16)); + redValue + greenValue + blueValue; }; context.translate(250, 100); for(var i=0; i<50; i++) { context.fillStyle = randomColor(parseInt(Math.random()*256), parseInt(Math.random()*256), parseInt(Math.random()*256)); context.scale(0.93, 0.93);//缩放 context.rotate(Math.PI/9);//旋转画布 context.translate(35, 12); context.fillRect(0, 0, 100, 50); } } </script> </body> </html>