<!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. 3分割线左右间距(LinearLayoutManager.VERTICAL)

    <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android=" ...

  2. C++入门经典-例3.23-使用嵌套循环输出乘法口诀表

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

  3. 选题 Scrum立会报告+燃尽图 01

    此作业要求参见[https://edu.cnblogs.com/campus/nenu/2019fall/homework/8683] 一.小组介绍 组长:贺敬文 组员:彭思雨 王志文 位军营 杨萍 ...

  4. sql server关键字大全

    保留关键字 Microsoft® SQL Server™ 2000 使用保留关键字定义.操作和访问数据库.保留关键字是 SQL Server 使用的 Transact-SQL 语言语法的一部分,用于分 ...

  5. Dubbo HelloWord 与 Spring Boot 整合

    实现消费者项目代码调用提供者项目代码,使用 zookeeper 做为注册中心 interface 项目 pom.xml <?xml version="1.0" encodin ...

  6. 网页页头meta详解（科普知识）

    1.Content-Type和Content-Language (显示字符集的设定)  说明:设定页面使用的字符集,用以说明主页制作所使用的文字已经语言,浏览器会根据此来调用相应的字符集显示page内 ...

  7. [doker]ubuntu18安装doker

    ubuntu安装doker很简单,分4个步骤: Step1:更新资源库并安装apt-transprot-https软件包. 在安装Docker前, 首拉取最新的软件资源库 wangju@wangju- ...

  8. 十八：jinja2之include标签

    用于将页面的某一块地方抽取出来,要嵌入内容的时候使用,继承的概念 把具体内容分别放到其他地方同一管理,要用的时候使用include继承 使用include的时候可以直接使用接收的数据

  9. linux:vi替换命令

    linux:vi替换命令 vi/vim 中可以使用 :s 命令来替换字符串.以前只会使用一种格式来全文替换,今天发现该命令有很多种写法(vi 真是强大啊,还有很多需要学习),记录几种在此,方便以后查询 ...

  10. win server2012r2上发布网站常见错误 "HTTP 错误 500.19 请求的页面的相关配置数据无效" 解决办法

    HTTP 错误 500.19 - Internal Server Error无法访问请求的页面,因为该页的相关配置数据无效. 问题“详细错误信息模块 IIS Web Core通知 BeginReque ...