<!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++）

    冒泡排序.选择排序.快速排序.插入排序.希尔排序.归并排序.基数排序.堆排序. 推荐网址1:https://www.cnblogs.com/onepixel/articles/7674659.html ...

  2. TensorFlow线性回归

    目录 数据可视化 梯度下降 结果可视化 数据可视化 import numpy as np import tensorflow as tf import matplotlib.pyplot as plt ...

  3. Removing jQuery from GitHub.com frontend

    Removing jQuery from GitHub.com frontend Web standards in the later years Over the years, GitHub gre ...

  4. Unknown class xxx in Interface Builder file. / NSUnknownKeyException

    Error: 2019-11-24 22:16:01.047997+0800 SingleViewDemo[22576:34699748] Unknown class FeedbackCell in ...

  5. 托管C++中System::String^ 转换为 char*

    https://docs.microsoft.com/en-us/cpp/dotnet/how-to-convert-system-string-to-standard-string?view=vs- ...

  6. leetcode 328 奇偶链表

    更新代码: 开头检测是否需要调整(是否具有第三个节点) 使用三个ListNode* 变量记录奇偶链表的头尾headA,tailA为奇链表,headB为偶数链表,由于只需要最后令tailA->ne ...

  7. 详解嵌套ListView、ScrollView布局显示不全的问题

    在项目开发中,可能经常遇到嵌套ListView.ScrollView的问题,就是重写onMeasure方法.解决如下 public class ExpandListView extends ListV ...

  8. 阶段3 3.SpringMVC·_01.SpringMVC概述及入门案例_04.入门程序之搭建开发环境

    选择骨架构建 默认选中next-然后finish后就会去网上下载插件.会比较耗费时间. 添加一组键值对: archetypeCatalog internal 添加了这组坚持对,就可以解决Mavn项目创 ...

  9. Linux日志筛选命令

    (1)Linux目录操作命令 cd ..退出当前目录,返回上一级目录:cd / 退出当前目录,返回根目录: mkdir命令用于创建一个新的目录:rmdir命令功能删除指定的空目录. (2)Linux筛 ...

  10. 使用boost库获取文件夹下所有文件名字

    最近整理项目发现一个曾经找了好久的有用的代码片段,就是获取文件夹下所有文件的名字,和当前文件的绝对路径. 记录一下. 使用的是boost库, #include <boost/filesystem ...