<!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. 【每日一包0009】group-array

    [github地址:https://github.com/ABCDdouyae...] group-array 对数组里面的多项按照指定的key进行整合 用法:group-array(arr, key ...

  2. 为Windows编译libobjc2（通过交叉编译的方式）

    前提:Linux系统.git.clang-8.g++-mingw-w64-x86-64.gobjc++-mingw-w64-x86-64. 一.下载源代码 git clone https://gith ...

  3. Android采用pm命令静默卸载应用

    卸载app的方式有多种,可以直接调用android系统的卸载程序,但是这样会调出android卸载提示框,问题就是真的不好看. 所以采用静默卸载的方式,避免弹出系统提示框. 方法一(调用系统卸载程序) ...

  4. java高级面试题汇总（复习）从最基础的往上复习，每天定期更新。

    每天搬一点砖,总有一天成为大牛! 看问题的时候请不要立马去翻答案,多想想. 看完答案可以问问为什么,尝试拓展!一起加油吧! 每个答案后面都有一个小彩蛋(一个以上的拓展问题),钻研让你先人一步. jav ...

  5. laravel 发送html邮件是a标签中的url不显示问题

  6. note: Spanner: Google’s Globally-Distributed Database

    1. Abstract & introduction ref:http://static.googleusercontent.com/media/research.google.com/zh- ...

  7. 源码编译apache报错的解决方法

    源码编译apache报错的解决方法   问题介绍 在源码编译安装httpd时,./configure执行无错误,到make时就报错,在网络上搜索了很多文章,很多方法如换apr-util的低版本并不能很 ...

  8. ORACLE 11GR2常用参数(含隐含参数)设置

    ORACLE 11GR2常用参数(含隐含参数)设置如下: alter system set "_PX_use_large_pool" = true scope=spfile;alt ...

  9. defineProperty

    ### Object.defineProperty() https://segmentfault.com/a/1190000007434923方法会直接在一个对象上定义一个新属性,或者修改一个已经存在 ...

  10. 【MAC】安装chrome浏览器

    step1:下载dmg安装包 chrome下载地址 点击[下载Chrome] step2:安装chrome 下载好googlechrome.dmg文件后,像其它程序一样安装就可以了 打开访达--> ...