利用画布，绘制随机大小，颜色，位置 方框
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>H5-canvas</title>

    <style type="text/css">

        canvas{background: #f1aaa3; margin: 80px auto; display: block;}

    </style>

</head>

<body >

    <canvas id="canvas" width="900px" height="468px">

    </canvas>

</body>

<script type="text/javascript">

    var canvas = document.getElementById("canvas");

    var context = canvas.getContext("2d");

    var width = canvas.width;

    var height = canvas.height;

    // context.fillStyle = "#008ce1";  //填充色

 //     context.strokeStyle = "#515151";  //描边色

 //     context.globalAlpha = 0.5;   // 透明度

    // context.fillRect(10,20,100,100); //x,y,w,h 方形

    // context.strokeRect(10,150,88,88); //描边

    // context.clearRect(20,30,50,50); //橡皮擦

    //随机颜色函数

    function randomColor(){

        var r = Math.floor(Math.random()*256);

        var g = Math.floor(Math.random()*256);

        var b = Math.floor(Math.random()*256);

        var color = 'rgb('+r+','+g+','+b+')';

        console.log(color);

        return color;

    }

    //canvas内随机位置大小方框函数

    function randomSize(){

      var x = Math.random()*width;

      var y = Math.random()*height;

      var w = Math.random()*(width-x);

      var h = Math.random()*(height-y);

      var data = [x,y,w,h];

      console.log(data);

      return data;

    }

    //canvas内随机位置出现随机大小颜色方框

    function randomRect(){

        context.strokeStyle = randomColor();

        var data = randomSize();

        context.strokeRect(data[0],data[1],data[2],data[3]);

        //递归每隔0.5秒执行一次当前函数

        setTimeout(randomRect,500);

    }

    randomRect();

</script>

</html>

canvas初体验的更多相关文章

  1. canvas初体验之加载图片

    上一篇的介绍主要是画一些基本的图案,这一篇主要是加载图案. canvas加载图片主要分为两个步骤: 1.获取图片资源. 2.将图片资源画到画布上. 1.1获取图片资源,canvasAPI为我们提供了多 ...

  2. canvas初体验之基本线条

    有的时候我们打开一些网站,可以看到背景是闪烁的星空或者是有一些可以与鼠标交互的线条等等,此酷炫的效果就是用到了html5的canvas效果. 首先来认识一下h5新增的标签的写法<canvas&g ...

  3. 炫酷的时钟--canvas初体验

    先啥也不说:来张效果图 我是根据:http://www.imooc.com/learn/133 这里的课程进行学习的.大大的感谢liuyubobobo老师的深入浅出的讲解!! 我在这里仅仅提供我自己的 ...

  4. Node.js 网页瘸腿爬虫初体验

    延续上一篇,想把自己博客的文档标题利用Node.js的request全提取出来,于是有了下面的初哥爬虫,水平有限,这只爬虫目前还有点瘸腿,请看官你指正了. // 内置http模块,提供了http服务器 ...

  5. .NET平台开源项目速览(15)文档数据库RavenDB-介绍与初体验

    不知不觉,“.NET平台开源项目速览“系列文章已经15篇了,每一篇都非常受欢迎,可能技术水平不高,但足够入门了.虽然工作很忙,但还是会抽空把自己知道的,已经平时遇到的好的开源项目分享出来.今天就给大家 ...

  6. Xamarin+Prism开发详解四：简单Mac OS 虚拟机安装方法与Visual Studio for Mac 初体验

    Mac OS 虚拟机安装方法 最近把自己的电脑升级了一下SSD固态硬盘,总算是有容量安装Mac 虚拟机了!经过心碎的安装探索,尝试了国内外的各种安装方法,最后在youtube上找到了一个好方法. 简单 ...

  7. Spring之初体验

                                     Spring之初体验 Spring是一个轻量级的Java Web开发框架,以IoC(Inverse of Control 控制反转)和 ...

  8. Xamarin.iOS开发初体验

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAAA+CAIAAAA5/WfHAAAJrklEQVR4nO2c/VdTRxrH+wfdU84pW0

  9. 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...

随机推荐

  1. Redis集群（单机多实例）

    Redis介绍   Redis是一个分布式缓存数据库服务器,提供基于内存访问的缓存服务,并且无论是在单服务器还是服务器集群上都有着较为灵活方便的扩展能力.   单个的Redis实例是单进程单线程的,由 ...

  2. ssm框架如果想要跨域请求，cors跨域

    <!-- 跨域 --> <mvc:cors> <mvc:mapping path="/**"/> </mvc:cors> 在spri ...

  3. [Linux]ubuntu安装基本流程

    ubuntu安装基本流程 1.设置分辨率2.设置语言环境3.设置服务器镜像源4.添加终端5.apt.apt-get更新和升级系统软件 sudo apt update/upgrade sudo apt- ...

  4. C# WebClient实现文件上传

    一.同步上传 文章 https://www.cnblogs.com/duanjt/p/6420172.html 里面有提到服务端通过WebApi如何实现文件上传,这里就只说客户端使用WebClient ...

  5. 金蝶K3常用数据表

    金蝶K3WISE常用数据表 K3Wise 14.2 清空密码update t_User set FSID=') F ", ,P T #8 *P!D &D 80!N &@ &l ...

  6. Asp.Net Boilerplate Project 使用swagger调试api

    文件有点大,去掉了packages文件夹,(Swashbuckle.Core.5.6.0) 链接:https://pan.baidu.com/s/1DzMLhFyRav0dufS4dTeMzg 提取码 ...

  7. hdoj3138

    题意:略 各点向原信念连INF+1的边,不同信念连INF的边,这样割原信念花费大一点.然后好友连1的边.最小割的结果-n*INF就是答案,因为割到哪边最少都要INF. #include <ios ...

  8. 【PHP函数】PHP 去掉字符串中的转义符号

    PHP字符串中的转义符号 string stripslashes ( string $str ) //去掉字符串中的反斜线字符.若是连续二个反斜线,则去掉一个,留下一个.若只有一个反斜线,就直接去掉.

  9. C#流程控制语句--分支语句（if，switch，三位运算符）

    分支语句:判断结构要求程序员指定一个或多个要评估或测试的条件,以及条件为真时要执行的语句(必需的)和条件为假时要执行的语句(可选的). 分支语句  if if(判断条件表达式) {//表达式结果为tu ...

  10. Educational Codeforces Round 53 (Rated for Div. 2)G. Yet Another LCP Problem

    题意:给串s,每次询问k个数a,l个数b,问a和b作为后缀的lcp的综合 题解:和bzoj3879类似,反向sam日神仙...lcp就是fail树上的lca.把点抠出来建虚树,然后在上面dp即可.(感 ...