<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>canvas实例</title>

    <style type="text/css">

        canvas{

            width: 600;

            height: 300;

            border-width: 1px;

            border-style: solid;

            border-color: #c3c3c3;

        }

    </style>

</head>

<body>

    <canvas id="myCanvas">

        <script type="text/javascript">

            function draw(x,y){

                var c=document.getElementById("myCanvas");

                var cxt=c.getContext("2d");

                cxt.fillStyle="rgb(255,"+x+','+y+")";

                cxt.beginPath();

                cxt.arc(x,y,10,0,Math.PI*2,true);

                cxt.closePath();

                cxt.fill();

            }

            for(var i=0;i<12;i++){

                for(var j=0;j<24;j++){

                    draw(12+j*50,12+i*25);

                }

            }

        </script>

    </canvas>

</body>

</html>

7.利用canvas和js画一个渐变的的更多相关文章

  1. 使用canvas通过js制作一个小型英雄抓怪兽的2D小游戏

    首先,这是一个HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  2. 用 D3.js 画一个手机专利关系图, 看看苹果,三星,微软间的专利纠葛

    前言 本文灵感来源于Mike Bostock 的一个 demo 页面 原 demo 基于 D3.js v3 开发, 笔者将其使用 D3.js v5 进行重写, 并改为使用 ES6 语法. 源码: gi ...

  3. js 利用canvas + flv.js实现视频流 截屏 、本地下载功能实现，兼容火狐，谷歌；canvas截屏跨域问题，无音频视频流加载不显示问题

    项目:物联网监控项目----后台视频流管理(前端实现视频截屏功能) 本文就不同视频源分情况展示: 1 本地视频(项目同目录视频)截屏(canvas.getContext("2d).drawI ...

  4. 10分钟，利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  5. 利用canvas画一个实时时钟

    先放一张效果图: 下面是源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  6. canvas游戏小试：画一个按方向键移动的圆点

    canvas游戏小试:画一个按方向键移动的圆点   自己对canvas,但又有一颗做游戏的心TT.然后记录一下对canvas的学习吧,用一个按方向键控制的小圆点来做练习.(编程时用了一些es6的语法) ...

  7. 用canvas画一个的小画板（PC端移动端都能用）

    前言 本篇的内容主要包括: canvas标签简介 画板的功能简介 画板的JS部分(包括:1.获取画布 2.使画板全屏幕显示且自适应 3.如何绘制直线 4.绘画时的三种状态(鼠标点击.移动.离开)5.画 ...

  8. js实现一个简单钟表动画(javascript+html5 canvas)

    第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas ...

  9. 用Canvas画一个刮刮乐

    Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...

随机推荐

  1. 关于 oracle10g、oracle client和plsql devement 三者之间的关系

    oracle10g是服务器,如果本机安装了oracle10g,没有必要安装oracle client,只要配置好DNS,就可以使用plsql devement连接     当然你也可以同时安装orac ...

  2. php面向对象 2

    继承概念:如果一个类有子类,那么该子类会继承父类的一切东西(私有成员访问不到)在定义子类的时候需要加一个关键字:extends特点:单继承,一个类只能有一个父类如果父类中有构造函数,子类在实例化的时候 ...

  3. DAY 2模拟赛

    DAY2 依旧是yyx出题 依旧毒瘤 滞空(jump/1s/64M) 题目描述: pyy在平面上第一象限内发现了顺序n个平台(她可以踩在这些平台上,但必须从第i-1号平台跳跃至i-1号平台),这些平台 ...

  4. 关于eclipse安装插件的问题

    使用eclipse(luna)不行,其为安装了ee有关插件的 使用eclipse(Juno)可以,其为原生版本

  5. 浏览器端-W3School-JavaScript：Screen 对象

    ylbtech-浏览器端-W3School-JavaScript:Screen 对象 1.返回顶部 1. Screen 对象 Screen 对象 Screen 对象包含有关客户端显示屏幕的信息. 注释 ...

  6. [mysql]多个字段确定唯一性-联合唯一索引

    一.联合唯一索引项目中需要用到联合唯一索引: 例如:有以下需求:每个人每一天只有可能产生一条记录:处了程序约定之外,数据库本身也可以设定: 例如:t_aa 表中有aa,bb两个字段,如果不希望有2条一 ...

  7. pycryptodom的源码安装

    1.去网站https://pypi.python.org/pypi/pycryptodome/#downloads下载 2.python setup.py build -> python set ...

  8. 原生js之addEventListener,removeEventListener

    使用addEventListener添加事件 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  9. LeetCode.1013-分割数组为三个和相同的部分

    这是小川的第378次更新,第406篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第240题(顺位题号是1013).给定一个整数数组A,当且仅当我们可以将数组分成具有相等和 ...

  10. ElasticSearch Kibana 创建索引,删除索引,查看索引配置

    1.输入命令,点击绿色的三角形箭头. PUT chuyuan  //创建索引 GET chuyuan/_settings  //查看chuyuan索引下的配置 GET _all/_settings   ...