运行效果：

<!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. 中文分词实践（基于R语言）

    背景:分析用户在世界杯期间讨论最多的话题. 思路:把用户关于世界杯的帖子拉下来.然后做中文分词+词频统计,最后将统计结果简单做个标签云.效果例如以下: 兴许:中文分词是中文信息处理的基础.分词之后.事 ...

  2. C中 数组和指针的异同

    数组在很多情况下是和指针等价的,数组的下标运算和指针的解引用也有等价形式:arr[i] == *(arr + 1):但是也有一些情况下数组和指针是不一样的:extern int arr[]; exte ...

  3. Error处理： android.media.MediaRecorder.start(Native Method) 报错：start failed: -19【转】

    本文转载自:http://blog.csdn.net/netwalk/article/details/17686993 Error处理: android.media.MediaRecorder.sta ...

  4. 利用JFreeChart生成区域图 (5) (转自 JSP开发技术大全)

    利用JFreeChart生成区域图 (5) (转自 JSP开发技术大全) 14.5 利用JFreeChart生成区域图 通过JFreeChart插件只能生成普通效果的区域图,利用工厂类ChartFac ...

  5. python 统计文件的个数

    import os path = r'F:\1back\picture' #获取当前路径 count = 0 for root,dirs,files in os.walk(path): #遍历统计 i ...

  6. CF 908 D New Year and Arbitrary Arrangement —— 期望DP

    题目:http://codeforces.com/contest/908/problem/D 首先,设 f[i][j] 表示有 i 个 a,j 个 ab 组合的期望,A = pa / (pa + pb ...

  7. POJ3709 K-Anonymous Sequence 斜率优化DP

    POJ3709 题意很简单 给n个递增整数(n<=500000)和一种操作(选择任意个数 使他们减少整数值) 使得对于所有的整数 在数列中 有k个相等的数 O(n^2)的DP方程很容易得出 如下 ...

  8. bzoj1537

    dp+树状数组 一维排序,一维离散化,然后跑lis,其实就是一个二维偏序 #include<bits/stdc++.h> using namespace std; ; int dp[N], ...

  9. Python---NumPy模块---矩阵操作

    1．NumPy访问[数组&矩阵] 2．矩阵的运算 3．NumPy通用函数 4.NumPy矩阵的合并和分割 print "**********Numpy访问(数组&矩阵)*** ...

  10. 安装Git（转载）

    转自:http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137396287703 ...