<!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. C++入门经典-例5.15-回收动态内存的一般处理步骤

    1:正确的步骤应该是如下代码所示: // 5.15.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostrea ...

  2. C++入门经典-例5.5-空类型指针的使用

    1:代码如下: // 5.5.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> using ...

  3. python - 函数any() 和 all() 的区别

    转自:https://www.cnblogs.com/nulige/p/6128816.html any()与all()函数的区别: any是任意,而all是全部. 版本:该函数适用于2.5以上版本, ...

  4. ffmpeg Tesseract-OCR 识别文字滤镜 中文识别输出文本

    ffprobe -show_entries frame_tags=lavfi.ocr.text -f lavfi -i "movie=in.tif,ocr=datapath=tessdata ...

  5. MySQL 常见面试知识点

    之前简单总结了一下MySQL的场景面试知识点 1.讲下MVCC原理 2.MySQL高可用架构介绍 3.OSC(在线更改表结构)原理 4.MySQL性能调优有哪些关键点/经验 5.MySQL在线备份方案 ...

  6. Spring----EJB

    EJB 是 Java EE 诸多规范之一,而 Spring 仅仅是一个框架并不是 Java EE. EJB 是百分百纯血统的 JCP 官方规范,而 Spring 是民间发起的框架. EJB 必须运行在 ...

  7. unieap 建库

    create tablespace unieap datafile 'unieap.dbf' size 100M reuse autoextend on next 50M;1. 2.drop user ...

  8. 用edoc2实现上传和下载

    import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONObject; import org.apache.http.Htt ...

  9. java调用支付宝 支付api 【沙箱环境】

    由于支付宝支付api需要各种备案,但学校项目需要引入支付功能  先演示  ,所以采用 沙箱环境 一.登录支付宝 开放平台 及配置相关 https://openhome.alipay.com/platf ...

  10. C#学习笔记三（委托·lambda表达式和事件，字符串和正则表达式，集合，特殊的集合）

    委托和事件的区别 序号 区别 委托 事件 1 是否可以使用=来赋值 是 否 2 是否可以在类外部进行调用 是 否 3 是否是一个类型 是 否,事件修饰的是一个对象 public delegate vo ...