运行效果：

<!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. [Debug] Inspect and Style an Element in DevTools that Normally Disappears when Inactive

    It’s handy to inspect an element in your browser’s DevTools when you need to experiment or tweak it’ ...

  2. [Python网络编程]浅析守护进程后台任务的设计与实现

    在做基于B/S应用中.常常有须要后台执行任务的需求,最简单比方发送邮件.在一些如防火墙,WAF等项目中,前台仅仅是为了展示内容与各种參数配置.后台守护进程才是重头戏.所以在防火墙配置页面中可能会常常看 ...

  3. Lua学习笔记7：时间和日期

    lua中的时间类似于C语言中的时间,例如以下: local time = os.time() print(time) local t = os.date("*t") for k,v ...

  4. Servlet+JSP 原理

    Servlet是用Java编写的Server端程序,与协议和平台无关,可移植行较强. Servlet在编辑时须要导入特定的Servlet API 的包,类似于普通Java程序的写法. Servlet採 ...

  5. 利用函数计算构建微信小程序的Server端

    10分钟上线 - 利用函数计算构建微信小程序的Server端-博客-云栖社区-阿里云 https://yq.aliyun.com/articles/435430 函数计算  读写 oss import ...

  6. FFmpeg解码视频帧为jpg图片保存到本地

    FFmpeg解码视频帧为jpg图片保存到本地 - CSDN博客 https://blog.csdn.net/qq_28284547/article/details/78151635

  7. luogu 4429 染色

    bjoi 2018 染色 推了个错误结论得了60分? 题目大意: 一个无重边和自环的无向图,并且对每个点分别给了一个大小为2的颜色集合,只能从这个集合中选一种颜色给这个点染色 求一个染色方案使得没有两 ...

  8. Oracle高水位线

    Oracle高水位线 https://blog.csdn.net/jx_jy/article/details/50607790 Oracle高水位线的概念 Oracle里面的对象放到存储级别都称为se ...

  9. [原创]桓泽学音频编解码（13）：AC3 位分配模块算法分析

    [原创]桓泽学音频编解码(1):MPEG1 MP3 系统算法分析 [原创]桓泽学音频编解码(2):AC3/Dolby Digital 系统算法分析 [原创]桓泽学音频编解码(3):AAC 系统算法分析 ...

  10. matlab采用mex编译多个cpp文件

    最近在看matlab code时,由于本人使用的是64系统,而code中的mex文件时在32位系统上编译的,所以需要重新自己编译maxflowmex.cpp,但是直接mex maxflowmex.cp ...