运行效果：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

    <canvas id="drawing" width="" height="">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 ===  ? str : ''+str;

            };

            var randomColor = function(redValue, greenValue, blueValue){

                redValue = addZero(redValue.toString());

                greenValue = addZero(greenValue.toString());

                blueValue = addZero(blueValue.toString());

                return '#' + redValue + greenValue + blueValue;

            };

            context.translate(, );

            for(var i=; i<; i++) {

                context.fillStyle = randomColor(parseInt(Math.random()*), parseInt(Math.random()*), parseInt(Math.random()*));

                context.scale(0.93, 0.93);//缩放

                context.rotate(Math.PI/);//旋转画布

                context.translate(, );

                context.fillRect(, , , );

            }

        }

    </script>

</body>

</html>

canvas一周一练 -- canvas绘制马尾图案 （5）的更多相关文章

  1. canvas一周一练 -- canvas绘制中国银行标志（4）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  2. canvas一周一练 -- canvas绘制饼图（3）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  3. canvas一周一练 -- canvas绘制太极图（6）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  4. canvas一周一练 -- canvas绘制立体文字（2）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  5. canvas一周一练 -- canvas绘制奥运五环（1）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  6. canvas一周一练 -- canvas基础学习

    从上个星期开始,耳朵就一直在生病,里面长了个疙瘩,肿的一碰就疼,不能吃饭不能嗨 (┳＿┳)……在此提醒各位小伙伴,最近天气炎热,一定要注意防暑上火,病来如山倒呀~ 接下来我正在喝着5块一颗的药学习ca ...

  7. 马尾图案之canvas的translate、scale、rotate的方法详解

    1.translate(x,y):平移 将画布的坐标原点向左右方向移动x,向上下方向移动y.canvas的默认位置是在(0,0).  例子:画布原点假如落在(1,1),那么translate(10,1 ...

  8. canvas——绘制解锁图案

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. canvas学习总结三：绘制路径-线段

    Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRect(),虽然strokezText(),fillText() ...

随机推荐

  1. cocos2dx塔防游戏逻辑

    cocos2dx 塔防游戏逻辑 1.欢迎界面 2.tield制作游戏地图,空块设置cantouch属性为1 3.设置地图锚点,把锚点增加一个锚点容器,给怪物的行走函数传入 该锚点容器參数,让怪物依照锚 ...

  2. 从编译器源代码中提取ARMv8的指令编码

    2012年11月份的资料,之前ARMv8手冊还没公布,我想办法从编译器的binutils中提取出了全部ARMv8指令的二进制编码,之前不能随便发,如今相当于解禁了^_^. 问题1:提取ARMv8的指令 ...

  3. SQLServer IP不能登录问题解决

    最近项目项目需要,要在windows2008R2服务器上部署项目,可是客户那边服务器上SqlServer也没有安装,一切都要自己解决,所以我就找了个2008的版本,进行安装,安装过程没有遇到什么问题, ...

  4. 使用 dva + antd 快速开发react应用

    使用 dva + antd 快速开发react应用 版本说明: 注意:dva的版本是0.9.2 $ node -v v10.2.1 $ npm -v $ dva -v dva-cli version ...

  5. KVPhone，VOS官方的SIP软电话电脑客户端

    来自官方,品质纯正.但是可能因为JAVA环境等问题无法安装,可以试试! 下载地址: 解压密码:www.51voip.org

  6. CodeForces 731F Video Cards (数论+暴力)

    题意:给定 n 个数,可以对所有的数进行缩小,问你找出和最大的数,使得这些数都能整除这些数中最小的那个数. 析:用前缀和来做,先统计前 i 个数中有有多少数,然后再进行暴力去找最大值,每次都遍历这一段 ...

  7. java io流读取 和commons.io的使用

    前提:记事本里面一共有605个字 1.使用BufferedReader和FileReader来读取txt里面的内容,用时相对短.读完记得关闭流br.close() 2.指定UTF-8输出格式,使用Fi ...

  8. bzoj 4424: Cf19E Fairy && codeforces 19E. Fairy【树形dp】

    参考:https://blog.csdn.net/heheda_is_an_oier/article/details/51131641 这个找奇偶环的dp1真是巧妙,感觉像tarjan一样 首先分情况 ...

  9. PWA技术深入学习

    PWA技术 PWA全称Progressive Web App,即渐进式WEB应用. 解决的问题 实现离线缓存功能,即使用户手机没有网络,依然可以使用一些离线功能 可以添加至主屏幕,点击主屏幕图标可以实 ...

  10. org.apache.poi.hssf.util.Region

    从POI 3.18开始被Deprecated,在3.20版本中被移除了,所以3.20以前的都有 为了避免这个问题,用CellRangeAddress代替Region,其用法相同