运行效果：

<!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. P-Called-Party-ID头域

    典型的proxy server在路由 INVITE 请求到目标时插入 P-Called-Party-ID 头域.该头域用 porxy 收到请求的 Request-URI 填写. UAS 从几个已注冊的 ...

  2. 改动MyEclipse行数的颜色

    改动MyEclipse行数的颜色 1.未改动前.行数的颜色 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveW91MjNoYWk0NQ==/font/5a6 ...

  3. [DevExpress]GridControl分页的实现

    加入两个组件:BindingNavigator和BindingSource 代码: using System; using System.Collections.Generic; using Syst ...

  4. HDU 4850 Wow! Such String!(欧拉道路)

    HDU 4850 Wow! Such String! 题目链接 题意:求50W内的字符串.要求长度大于等于4的子串,仅仅出现一次 思路:须要推理.考虑4个字母的字符串,一共同拥有26^4种,这些由这些 ...

  5. 容器ConcurrentHashMap原理(学习)

    一.概述 HashMap 是非线程安全的,在不考虑性能问题的时候,我们的解决方案有 Hashtable 或者Collections.synchronizedMap(hashMap),这两种方式基本都是 ...

  6. YTU 2625: B 构造函数和析构函数

    2625: B 构造函数和析构函数 时间限制: 1 Sec  内存限制: 128 MB 提交: 772  解决: 513 题目描述 在建立类对象时系统自动该类的构造函数完成对象的初始化工作, 当类对象 ...

  7. python-----获取ip的两种方法

    方法一: 通常使用socket.gethostbyname()方法即可获取本机IP地址,但有时候获取不到(比如没有正确设置主机名称),示例代码如下: import socket # 获取本机计算机名称 ...

  8. IJ：Eclipse快捷键大全

    ylbtech-IJ:Eclipse快捷键大全 1.返回顶部 1. Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加 ...

  9. [Shell学习笔记] read命令从键盘或文件中获取标准输入（转载）

    转自:http://www.1987.name/151.html read命令是用于从终端或者文件中读取输入的内部命令,read命令读取整行输入,每行末尾的换行符不被读入.在read命令后面,如果没有 ...

  10. 2017 ACM-ICPC 亚洲区（南宁赛区）网络赛 The Heaviest Non-decreasing Subsequence Problem

    Let SS be a sequence of integers s_{1}s​1​​, s_{2}s​2​​, ......, s_{n}s​n​​Each integer is is associ ...