利用画布，绘制随机大小，颜色，位置 方框
<!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. 二.误删除MySQL用户,恢复方法

    误删除MySQL用户导致无法进入数据库 一.方法一 1.停止数据库 [root@db02 ~]# /etc/init.d/mysqld stop 2.跳过授权表,跳过网络启动数据库 [root@db0 ...

  2. 使用Spring MVC实现数据绑定

    使用Spring MVC实现数据绑定 ——Spring MVC支持将表单参数自动绑定在映射方法的参数. ①绑定标量数据 前端代码: <form action="${pageContex ...

  3. webpack-dev-server的执行逻辑

    1.运行npm i webpack-dev-server -D 把工具安装到项目的本地开发依赖 2.改工具用法跟webpack的用法完全一样:package.json中增加配置,直接用npm run ...

  4. virtual box centos7 common operation

    ======= network part =======1.设置桥接模式 2.vi /etc/sysconfig/network-scripts/ifcfg-enp0s3BOOTPROTO=stati ...

  5. C# Selenium 破解腾讯滑动验证

    什么是Selenium? WebDriver是主流Web应用自动化测试框架,具有清晰面向对象 API,能以最佳的方式与浏览器进行交互. 支持的浏览器: Mozilla Firefox Google C ...

  6. (转)通过maven，给没有pom文件的jar包生成pom文件，maven项目引入本地jar包

    文章完全转载自 : https://blog.csdn.net/qq_31289187/article/details/81117478 问题一: 经常遇到公司私服或者中央仓库没有的jar包,然后通过 ...

  7. [Database] 不知道表名和字段查找值=1234的数据.

      --如果表比较大,时间会比较长 DECLARE @searchValue NVARCHAR(50) SET @searchValue='1234' DECLARE @t TABLE ( rowNu ...

  8. 【Code Tools】Java微基准测试工具JMH之入门篇

    一.JMH是什么 JMH是一个Java工具,用于构建.运行和分析用Java和其他语言编写的以JVM为目标的 nano/micro/milli/macro 基准测试. 二.基本注意事项 1)运行JMH基 ...

  9. JAVA程序设计的第一次作业

    这是我第一次接触博客,刚开始用博客很生疏,感觉很麻烦,但是后来慢慢从老师那里了解到了许多博客可以带给我们的便利.通过博客,我们不仅可以记录自己从刚开始进入程序学习的懵懵懂懂到后来想要学,想深究,想探讨 ...

  10. BUAAOO-First-Summary

    目录 homework & class & trainning : 两次上机.三次作业.四周课堂 code analysis & review : 为什么我没有bug 黑盒测试 ...