Canvas createRadialGradient API

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>createRadialGradient</title>

</head>

<body>

    <canvas id='myCanvas' width='800' height='600'>

        your browser does not support canvas

    </canvas>

    <script type="text/javascript">

    var c = document.getElementById('myCanvas');

    var ctx = c.getContext('2d');

    var grd = ctx.createRadialGradient(100, 100, 10, 100, 100, 100);

    grd.addColorStop(0, '#00ff00');

    grd.addColorStop(1, '#ff0000');

    ctx.fillStyle = grd;

    ctx.fillRect(0, 0, 200, 200);

    </script>

</body>

</html>

Canvas createRadialGradient API的更多相关文章

  1. javascript canvas全部API

    HTMLCanvasElement//canvas elem对象 属性 height//高 width//宽 方法 getContext()//获取<canvas>相关的可绘制的上下文 t ...

  2. canvas绘图API详解

    canvas绘图API详解 1.context的状态 矩阵变换属性 当前剪辑区域 context的其他状态属性: strokeStyle, fillStyle, globalAlpha, lineWi ...

  3. Html5 学习系列（五）Canvas绘图API快速入门（2）

    Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来.接下里我会在本文中给各位介绍Canvas的其他API:绘制线条.绘制椭圆.绘制图片 ...

  4. Html5 学习系列（五）Canvas绘图API快速入门（1）

    引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...

  5. 引言：Canvas绘图API快速入门

    引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...

  6. HTML5之canvas基本API介绍及应用 1

    一.canvas的API: 1.颜色.样式和阴影: 2.线条样式属性和方法: 3.路径方法: 4.转换方法: 5.文本属性和方法: 6.像素操作方法和属性: 7.其他: drawImage:向画布上绘 ...

  7. Canvas原生API(纯CPU)计算并渲染三维图

    Canvas原生API(纯CPU)计算并渲染三维图 前端工程师学图形学:Games101 第三次作业 利用Canvas画三维中的三角形并使用超采样实现抗锯齿 最终完成功能 Canvas 原生API实现 ...

  8. html5 canvas常用api总结(二)--绘图API

    canvas可以绘制出很多奇妙的样式和美丽的效果,通过几个简单的api就可以在画布上呈现出千变万化的效果,还可以制作网页游戏,接下来就总结一下和绘图有关的API. 绘画的时候canvas相当于画布,而 ...

  9. canvas的api小结

    HTML <canvas id="canvas"></canvas> Javascript var canvas=document.getElementBy ...

随机推荐

  1. RSA非对称加密Java实现

    原文 加密基础方法类 import java.security.MessageDigest; import sun.misc.BASE64Decoder; import sun.misc.BASE64 ...

  2. fsck害了我很久了，必须关掉，因为他每次打卡都要推迟数十分钟。

    http://crashmag.net/disable-filesystem-check-fsck-at-boot-time Disable the filesystem check (fsck) a ...

  3. Android开发学习资源

    https://developer.android.google.cn/training/index.html

  4. AMQP协议学习

    参考这个:http://kb.cnblogs.com/page/73759/ 写的挺好 AMQP协议是一种二进制协议,提供客户端应用与消息中间件之间异步.安全.高效地交互.从整体来看,AMQP协议可划 ...

  5. （干货）一次httpclient的close_wait问题的探讨

    从图中可以看出,如果客户端被动关闭连接,且没有向服务器端发送FIN,则会一直处于CLOSE_WAIT状态. 处理服务器在处理完请求,与后端Nginx之间的连接仍然保持着CLOSE_WAIT状态,个数为 ...

  6. (简单) HUST 1017 Exact cover , DLX+精确覆盖。

    Description There is an N*M matrix with only 0s and 1s, (1 <= N,M <= 1000). An exact cover is ...

  7. Mac下安装包管理平台Homebrew（Mac 10.12）

    在终端上输入: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/maste ...

  8. Eclipse PHP 代码无法自动提示函数

    在 linux 系统的 workwpace 里按 ctrl+h,显示出隐藏的文件,找到 .metadata 文件夹,然后将该文件夹删除,再重启 Eclipse 即可.其实它会将之前 Eclipse 连 ...

  9. linux之scp

    传输文件夹 scp -r -P 目标端口号 文件夹名 目标用户名@目标服务器地址:目标存放地址 传输文件夹 scp -P 目标端口号 文件名 目标用户名@目标服务器地址:目标存放地址

  10. Docker学习小计

    1.自动下载并且创建容器 Now verify that the installation has worked by downloading the ubuntu image and launchi ...