利用画布，绘制随机大小，颜色，位置 方框
<!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. [译]RabbitMQ教程C#版 - 远程过程调用(RPC)

    先决条件 本教程假定 RabbitMQ 已经安装,并运行在localhost标准端口(5672).如果你使用不同的主机.端口或证书,则需要调整连接设置. 从哪里获得帮助 如果您在阅读本教程时遇到困难, ...

  2. SpringBoot和druid数据源集成Jpa

    1.pom文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...

  3. krpano生成全景图

    1.下载krpano工具 第一次我下载的有水印,但是第二次下载的便没了,原因我也不清楚.下载好后不要急着打开.exe程序 2.生成全景图 将全景图拖入MAKE VTUOR (NORMAL) DROPL ...

  4. Maven安装环境变量配置教程（带图）

    Maven安装配置环境变量教程 什么是maven:Maven是一个软件项目管理和综合工具.基于项目对象模型(POM)的概念,Maven可以从一个中心资料片管理项目构建,报告和文件. (简单来说就是,安 ...

  5. 图片裁剪 cropper.js 上传组件封装 vue

    //HTML cropper.js 文档地址: https://github.com/fengyuanchen/cropperjs/blob/master/README.md <template ...

  6. font-spider-plus，字体压缩插件使用笔记

    font-spider-plus使用笔记, fsp是一个腾讯的大佬改版后的font-soider 主要思路是 采集线上网页使用到的字体,从字体文件中分离出来,完成大幅度压缩, 1,npm i font ...

  7. 2 - Binary Search & LogN Algorithm - Apr 18

    38. Search a 2D Matrix II https://www.lintcode.com/problem/search-a-2d-matrix-ii/description?_from=l ...

  8. TreeMap/LinkedHashMap/HashMap按键排序和按值排序

    今天做统计时需要对X轴的地区按照地区代码(areaCode)进行排序,由于在构建XMLData使用的map来进行数据统计的,所以在统计过程中就需要对map进行排序. 一.简单介绍Map 在讲解Map排 ...

  9. RxJava2

    原文地址 这可能是最好的RxJava 2.x 入门教程(一) 这可能是最好的RxJava 2.x 入门教程(二) 这可能是最好的RxJava 2.x 入门教程(三) 这可能是最好的RxJava 2.x ...

  10. Vue route的使用

    1.route.js文件 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const router = ne ...