利用画布，绘制随机大小，颜色，位置 方框
<!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. 6、Docker存储卷

    Why Data Volumes?  来自马哥教育 Data volumes Volume types  绑定挂载卷:在宿主机和容器上各指明绑定路径才能进行绑定. docker管理卷:在容器内指定挂载 ...

  2. Apache 配置多个端口多站点（Linux)

    for apache2 configuration: by default, apache is configured 80 port for the default web site. follow ...

  3. mongoose一看就会的基本操作

    Mongoose是在node.js异步环境下对mongodb进行便捷操作的对象模型工具 那么要使用它,首先你得装上node.js和mongodb,关于mongodb的安装和操作介绍可以参考:http: ...

  4. webpack dllPlugin使用（基于vue-cli webpack模板）

    由于本例单入口时打包的文件体积过大,将其分成多入口. 主要涉及到的几个文件为: /index.html, /webpack.dll.config.js, /build/webpack.base.con ...

  5. String 、Stringbuilder和StringBuffer的区别

    JAVA平台提供了三个类:String.StringBuilder和StringBuffer,它们可以储存和操作字符串,即包含多个字符的字符数据.这个String类提供了数值不可改变的字符串.而这个S ...

  6. stylus入门学习笔记

    title: stylus入门学习笔记 date: 2018-09-06 17:35:28 tags: [stylus] description: 学习到 vue, 有人推荐使用 stylus 这个 ...

  7. 实验十一 团队项目设计完善&编码测试

    任务一: 根据OOD详细设计工作要点,修改完善团队项目系统设计说明书和详细设计说明,将完善后内容以<XX团队项目软件设计方案>为名发布在团队博客中,博文中要突出对完善内容的陈述说明,修改部 ...

  8. selenium 模拟拖动滚动条下拉

    senium做自动化测试的过程中,有的页面需要下拉滚动条才能全部加载完成,否则加载不出来就定位不到想要的元素. 参考链接:http://www.cnblogs.com/landhu/p/5761794 ...

  9. pycharm配置可视化数据库

    出于数据库安全性,数据库管理员会给数据库配置SSH,也就是为数据库增加一个安全协议(通信加密),加大外部用户对该数据库远程连接的难度. 利用SSH通道来连接远程数据库时需要以下信息:远程数据库服务器I ...

  10. JS回调函数中的this指向(详细)

    首先先说下正常的this指向问题 什么是this:自动引用正在调用当前方法的.前的对象. this指向的三种情况 1. obj.fun()     fun中的this->obj,自动指向.前的对 ...