<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <canvas id="canvas" style="margin:0 auto;border:1px #ddd solid;">

        The current browser does not support Canvas, can replace the browser a try!

    </canvas>

    <script>

        window.onload = function(){

            var canvas = document.getElementById('canvas');

            canvas.width = 800;

            canvas.height = 800;

            if(canvas.getContext('2d')){

                var context = canvas.getContext('2d');

                // begin

                var radialGrad = context.createRadialGradient(400,400,0,400,400,500);

                radialGrad.addColorStop(0.0,'white');

                radialGrad.addColorStop(0.25,'yellow');

                radialGrad.addColorStop(0.5,'green');

                radialGrad.addColorStop(0.75,'blue');

                radialGrad.addColorStop(1.0,'black');

                context.fillStyle = radialGrad;

                context.fillRect(0,0,800,800)

            }else{

                alert('当前游览器不支持Canvas，请更换游览器后再试！');

            }

        }

    </script>

</body>

<script>

    /*总结

    step 1

        // 内圆的圆心（x0,y0） 内圆半径r0

        var grd = context.creatRadialGradient(x0,y0,r0,x1,x1,r1)

    step 2

        //stop的值域[0,1]

        grd.addColorStop(stop,color)

    */

</script>

</html>

canvas-3radialGradient.html的更多相关文章

  1. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  2. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  3. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  4. 获取Canvas当前坐标系矩阵

    前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...

  5. Canvas坐标系转换

    默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...

  6. Canvas绘图之平移translate、旋转rotate、缩放scale

    画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...

  7. 用html5的canvas和JavaScript创建一个绘图程序

    本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...

  8. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

  9. 使用 JavaScript 和 canvas 做精确的像素碰撞检测

    原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...

  10. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

随机推荐

  1. vuejs-devtools

    先看看http://www.cnblogs.com/zhnaglei/p/7121482.html 这里的方法. 如果出现vue.js not detected之类的错误.试试用调试模式,就是用npm ...

  2. c++ 异常处理（1）

    异常 (exception) 是 c++ 中新增的一个特性,它提供了一种新的方式来结构化地处理错误,使得程序可以很方便地把异常处理与出错的程序分离,而且在使用上,它语法相当地简洁,以至于会让人错觉觉得 ...

  3. Android开发工程师文集-layout_weight讲解

    前言 大家好,给大家带来Android开发工程师文集-layout_weight讲解的概述,希望你们喜欢 Layout_weight的相关代码展示 <TextView android:layou ...

  4. spring框架学习笔记6：JDBC模板

    JDBC模板:Spring中对数据库的操作. 这一部分对熟悉DBUtils的QueryRunner的开发者来说,非常简单 这是以前我简单写的dbutils的知识: http://www.cnblogs ...

  5. Network - SSL/TLS的基本概念

    对称加密与非对称加密 加密---明文变成密文:解密---密文变为明文.在这两个过程中,都需要密钥. 对称密钥加密(共享密钥) 指的是双方共同拥有使用完全相同的单个key, 这种Key既用于加密,也用于 ...

  6. 机器学习基石笔记：12 Nonlinear Transformation

    一.二次假设 实际上线性假设的模型复杂度是受到限制的, 需要高次假设打破这个限制. 假设数据不是线性可分的,但是可以被一个圆心在原点的圆分开, 需要我们重新设计基于该圆的PLA等算法吗? 不用, 只需 ...

  7. 6月份值得一看的 Java 技术干货！

    6月过完了,这一年都 TM 过了一半了,大家都回想下自己这大半年,你都收获了什么??技术有提升吗?对象搞定了吗? 说多了都是泪,唯有 WIFI.空调.西瓜.足球能够解忧.. 话说中国队怎么还不上场?哈 ...

  8. Mongodb 无法启动 windows Mongodb 无法启动 couldn't connect to server

      发现在mongodb.log里出现  2017-07-07T17:01:55.339+0800 I CONTROL  [main] Error connecting to the Service ...

  9. tf.cast()的用法(转)

    一.函数 tf.cast() cast( x, dtype, name=None ) 将x的数据格式转化成dtype.例如,原来x的数据格式是bool, 那么将其转化成float以后,就能够将其转化成 ...

  10. oracle无法启动asm实例记录

    首先查看asm进程ps aux|grep asmasm进程没起进行下面操作su - gridsrvctl start asmexit查看ora进程ps aux|grep oraora进程没起进行下面操 ...