<!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. idea maven sync Cannot resolve xxx 的解决方案

    经常会出现这种奇葩情况,提示找不到包 其实是因为网络波动或者突然断掉,导致包更新出现问题 直接去maven的仓库目录 找到不能找到的包 删掉相关目录 然后重新更新maven就行了 比如 直接去仓库目录 ...

  2. 后盾网lavarel视频项目---4、lavarel和vue都是{{}}表示变量，如何解决冲突

    后盾网lavarel视频项目---4.lavarel和vue都是{{}}表示变量,如何解决冲突 一.总结 一句话总结: @{{videos}}:@符号表示lavarel不处理:textarea nam ...

  3. VSCode安装go语言开发环境，go插件问题解决

    在安装go插件时,会自动更新很多依赖库文件,都是从Github更新下来,但是因为Github的文件中,多有应用go官网中的文件,导致,因为网络缘故,不能直接下载,导致安装失败,如下:   Instal ...

  4. directshow播放摄像头卡死问题

    最近遇到一个坑,directshow显示摄像头的时候,使用无窗口模式结果在浏览器插件里面界面卡死,但是控制台下面的句柄传过去却能正常播放 刚开始以为是调用的参数问题,琢磨了几天硬是搞不定,最后想到插件 ...

  5. 运算 Kotlin(3)

    运算Kotlin支持数字运算的标准集,运算被定义为相应的类成员(但编译器会将函数调用优化为相应的指令) . 参见运算符重载.对于位运算,没有特殊字符来表示,而只可用中缀方式调用命名函数,例如:val ...

  6. leetcode-easy-trees-102. Binary Tree Level Order Traversal-YES

    mycode  98.56% # Definition for a binary tree node. # class TreeNode(object): # def __init__(self, x ...

  7. Learn The Architecture Memory Management 译文

    1.概述 本文档介绍了ARMv8-A架构内存管理的关键——内存地址转换,包括虚拟地址(VA)到物理地址(PA)的转换.页表(或称地址转换表)格式以及TLBs(Translation Lookaside ...

  8. 三种CSS样式

    内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种. 内联式css样式表就是把css代码直接 ...

  9. golang defer那些坑

    defer以下几个特性,使用时需要关注下. 即时的参数传递 调用os.Exit()时defer不会被执行 defer与return的先后顺序 1.即时的参数传递 定义defer时传入的参数,是作为拷贝 ...

  10. python 逻辑运算符and or

    Python中逻辑运算符与C.C++.Golang等语言不太一样. 简单记录下. 1. 都是真或第一个真,第二个假 >>> a = 1 >>> b = 2 > ...