<!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. 分布式-信息方式-ActiveMQ的Destination高级特性3

    虚拟destination用来创建逻辑destination,客户端可以通过它来生产和消费消息,它会把消息映射到物理destination. ActiveMQ支持2种方式: 1:虚拟主题(Virtua ...

  2. C++入门经典-例5.12-动态内存的销毁

    1:当申请一块堆内存后,系统不会再程序执行时一句情况自动销毁它.若想释放该内存,则需要使用delete关键字.下面的代码中,可以看出堆和栈的不同.代码如下: // 5.12.cpp : 定义控制台应用 ...

  3. SpringMVC配置多个自定义拦截器

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  4. 数据库-MongoDb

    *本文总结下使用Mongodb遇到的问题: 1. 安装完MongoDb后先启动服务端,然后再启动客户端: 直接上图: 注意点:mongod.exe :是用来连接到mongo数据库服务器的,即服务器端. ...

  5. 一篇非常好的分析 Selenium 2 和 3 的原理： selenium3：你安装 geckodriver 了吗？

    转自:https://testerhome.com/topics/10248 另一篇:Selenium WebDriver的工作原理 https://blog.csdn.net/yoyocat915/ ...

  6. 让Socket穿透Windows防火墙

    原文地址:https://blog.csdn.net/zuishikonghuan/article/details/48030539 创建了ServerSocket以后,并不是没事了,其实上,为了系统 ...

  7. Struts2-Ajax整合之Jquery版本

    <纯JavaScript版本  http://www.cnblogs.com/hzb462606/p/8934787.html  > 大部门跟JavaScript版本一致,就是<sc ...

  8. zabbix服务端安装

    1.安装zabbix服务(1)先rpm安装lamp环境 yum install -y httpd mysql mysql-libs php php-mysql mysql-server php-bcm ...

  9. 正确关闭selinux

    .查看当前selinux的状态命令为 getenforce .两个都要关.注意先看看有么有这两个文件,如果没有就创建一个,否则后期会出现很多问题 cat > /etc/selinux/confi ...

  10. Django 中 ModelForm 的使用

    定义 ModelForm 定制 ModelForm Meta 在 Form 中另外定义 Field 值得一提的一些 Field 转化 AutoField BooleanField ForeignKey ...