利用画布，绘制随机大小，颜色，位置 方框
<!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. LOJ 2409「THUPC 2017」小 L 的计算题 / Sum

    思路 和玩游戏一题类似 定义\(A_k(x)=\sum_{i=0}^\infty a_k^ix^i=\frac{1}{1-a_kx}\) 用\(\ln 'x\)代替\(\frac{1}{x}\), 所 ...

  2. vue使用$http服务端收不到参数

    老夫子我正在憋方案书,听到身后传来细软的声音:“李哥,我这有个Bug调了很长时间了,您能帮我看一下吗?”.说这话的是我的好朋友,公司新来的前端小妹伊万卡.我起身向她走去,看到因长时间调试Bug漂亮的脸 ...

  3. 工具类封装之--CommonUtils

    /** * @file_name : CommonUtils.java * @author : * @date : 2018年3月15日 * Description: */ package cn.xx ...

  4. springboot整合ActiveMQ，配置问题

    1.ActiveMQ的安装和相关配置修改 去官网下载安装包解压至文件夹 双击打开 打开浏览器输入 http://127.0.0.1:8161 到此activeMQ就安装好了 2.springboot工 ...

  5. 【python3】 函数 装饰器

    第一步 : 了解装饰器 装饰器模式,重点在于装饰,装饰的核心仍是被装饰的对象. 举一个栗子:我今天穿了一件短袖,但是突然一阵风,短袖没办法为我御寒,我想到的办法是将短袖变得更厚更长,但是改造之后,它就 ...

  6. 【python 3】 函数 初识

    函数初识 1.函数的定义.调用.返回值 函数的定义.调用.返回值 def demo(): ## 定义函数 (def + 空格 + 函数名 + () + 冒号) ## 如下为函数体 return a # ...

  7. DAY16 模块和包的导入

    一.包 1.包的定义 包:就是一系列模块的结合体 2.重点 1.包中一定要有一个专门来管理包中所有模块的文件 2.包名:存放一系列模块的文件夹名字 3.包名(包对象)存放的是管理模块的那个文件的地址, ...

  8. Map.putAll方法

    import Java.util.HashMap; public class Map_putAllTest { public static void main(String[] args){    / ...

  9. Phpstorm-远程连接服务器实时编辑代码

    一,配置远程服务器FTP 1.打开Phpstorm >>> 选择 2.选择 3.输入项目名称(此项目名称不会同步到服务器,只是在本地电脑上的项目名称) 4.将编辑器设置为实时自动同步 ...

  10. docker 部署nginx

    # 下载镜像 docker pull nginx # 挂载  文件 和文件夹必须存在 docker run -p 80:80 --name mynginx -v $PWD/www:/www -v $P ...