canvas一周一练 -- canvas绘制马尾图案 (5)
运行效果:
<!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)的更多相关文章
- canvas一周一练 -- canvas绘制中国银行标志(4)
运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...
- canvas一周一练 -- canvas绘制饼图(3)
运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...
- canvas一周一练 -- canvas绘制太极图(6)
运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...
- canvas一周一练 -- canvas绘制立体文字(2)
运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...
- canvas一周一练 -- canvas绘制奥运五环(1)
运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...
- canvas一周一练 -- canvas基础学习
从上个星期开始,耳朵就一直在生病,里面长了个疙瘩,肿的一碰就疼,不能吃饭不能嗨 (┳_┳)……在此提醒各位小伙伴,最近天气炎热,一定要注意防暑上火,病来如山倒呀~ 接下来我正在喝着5块一颗的药学习ca ...
- 马尾图案之canvas的translate、scale、rotate的方法详解
1.translate(x,y):平移 将画布的坐标原点向左右方向移动x,向上下方向移动y.canvas的默认位置是在(0,0). 例子:画布原点假如落在(1,1),那么translate(10,1 ...
- canvas——绘制解锁图案
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- canvas学习总结三:绘制路径-线段
Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRect(),虽然strokezText(),fillText() ...
随机推荐
- 中文分词实践(基于R语言)
背景:分析用户在世界杯期间讨论最多的话题. 思路:把用户关于世界杯的帖子拉下来.然后做中文分词+词频统计,最后将统计结果简单做个标签云.效果例如以下: 兴许:中文分词是中文信息处理的基础.分词之后.事 ...
- C中 数组和指针的异同
数组在很多情况下是和指针等价的,数组的下标运算和指针的解引用也有等价形式:arr[i] == *(arr + 1):但是也有一些情况下数组和指针是不一样的:extern int arr[]; exte ...
- Error处理: android.media.MediaRecorder.start(Native Method) 报错:start failed: -19【转】
本文转载自:http://blog.csdn.net/netwalk/article/details/17686993 Error处理: android.media.MediaRecorder.sta ...
- 利用JFreeChart生成区域图 (5) (转自 JSP开发技术大全)
利用JFreeChart生成区域图 (5) (转自 JSP开发技术大全) 14.5 利用JFreeChart生成区域图 通过JFreeChart插件只能生成普通效果的区域图,利用工厂类ChartFac ...
- python 统计文件的个数
import os path = r'F:\1back\picture' #获取当前路径 count = 0 for root,dirs,files in os.walk(path): #遍历统计 i ...
- 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 ...
- POJ3709 K-Anonymous Sequence 斜率优化DP
POJ3709 题意很简单 给n个递增整数(n<=500000)和一种操作(选择任意个数 使他们减少整数值) 使得对于所有的整数 在数列中 有k个相等的数 O(n^2)的DP方程很容易得出 如下 ...
- bzoj1537
dp+树状数组 一维排序,一维离散化,然后跑lis,其实就是一个二维偏序 #include<bits/stdc++.h> using namespace std; ; int dp[N], ...
- Python---NumPy模块---矩阵操作
1.NumPy访问[数组&矩阵] 2.矩阵的运算 3.NumPy通用函数 4.NumPy矩阵的合并和分割 print "**********Numpy访问(数组&矩阵)*** ...
- 安装Git(转载)
转自:http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137396287703 ...