canvas一周一练 -- canvas绘制马尾图案

Posted 2020-10-01 张不丢

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas一周一练 -- canvas绘制马尾图案相关的知识，希望对你有一定的参考价值。

运行效果：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <canvas id="drawing" width="1000" height="600">A drawing of someing!</canvas>
    <script type="text/javascript">
　　　　 var drawing = document.getElementById(\'drawing\');
        if(drawing.getContext) {
            //绘制马尾图案
            var context = drawing.getContext(\'2d\');
            //随机颜色
            var addZero = function(str){
                return str.length === 2 ? str : \'0\'+str;
            };
            var randomColor = function(redValue, greenValue, blueValue){
                redValue = addZero(redValue.toString(16));
                greenValue = addZero(greenValue.toString(16));
                blueValue = addZero(blueValue.toString(16));
                return \'#\' + 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>

以上是关于canvas一周一练 -- canvas绘制马尾图案的主要内容，如果未能解决你的问题，请参考以下文章

Canvas---绘制饼状图

H5画布 canvas 入门到精通 _ 第一部分(canvas简介绘制圆形/矩形案例饼状图绘制)

带着canvas去流浪绘制雷达图

Android UICanvas 画布 ⑦ ( Canvas 绘制显示区域 | Canvas 绘制矩形源码分析 )

SWT Canvas绘制动态图的问题

canvas绘制