运行效果：

<!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. js 获取文件本地路径

    1.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  2. Start Xamarin——与Microsoft 的sales development manager的闲谈

    由于在Xamarin属于微软之前,就已经有Xamarin的账号,试用过破解版的.所以4月1号微软set Xamarin free之后.就收到了Xamarin的邀请试用邮件. 试用完了之后第二天.收到邮 ...

  3. 演练：我的第一个 WPF 桌面应用程序 https://docs.microsoft.com/zh-cn/dotnet/framework/wpf/getting-started/walkthrough-my-first-wpf-desktop-application

    这篇文章演示如何开发简单的 Windows Presentation Foundation (WPF) 应用程序包括元素所共有的大多数 WPF 应用程序: 可扩展应用程序标记语言 (XAML) 标记. ...

  4. GSON学习笔记之初识GSON

    引用"JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,採用全然独立于语言的文本格式.为Web应用开发提供了一种理想的数据交换格式. " ...

  5. 自己定义ViewGroup控件（一）-----&gt;流式布局进阶（一）

    main.xml <? xml version="1.0" encoding="utf-8"?> <com.example.SimpleLay ...

  6. Mac下搭建react native开发环境

    安装必需软件 Homebrew Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件. /usr/bin/ruby -e "$(curl -fsSL htt ...

  7. 前端性能调优Gzip Filter

    转自:https://blog.csdn.net/zxk15982106569/article/details/18922613 客户端向web服务器端发出了请求后,通常情况下服务器端会将页面文件和其 ...

  8. [App Store Connect帮助]三、管理 App 和版本（6.3）转让 App：发起 App 转让

    在发起前,您需要接收者组织中“帐户持有人”的 Apple ID,并且满足 App 转让的条件.请前往 App 转让条件. 注:App 转让完成后,该 App 会从您的帐户中移除,因此,您应当备份该 A ...

  9. 【Tair】淘宝分布式NOSQL框架：Tair

    Tair是淘宝的一个开源项目,它是一个分布式的key/value结构数据的解决方案. 一.基本组成 作为一个分布式系统,Tair由一个中心控制节点(config server)和一系列的服务节点(da ...

  10. laravel ORM 只开启created_at的方法

    class User extends Model { //重写setUpdatedAt方法 public function setUpdatedAt($value) { // Do nothing. ...