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. Delphi 的绘图功能[10] - TFONT 类

    Delphi 的绘图功能[10] - TFONT 类 ;DEFAULT_CHARSET     = ;SYMBOL_CHARSET      = ;SHIFTJIS_CHARSET    = ;HAN ...

  2. Java运行内存结构分析

  3. 解决airserver在Windows下安装失败的问题

    airserver 可以将iphone 实时投影到mac 和 pc.在mac上安装非常简单.但是在Windows上安装时会有很多问题.之前我电脑安装很快就完成了(因为我之前已经在不知情的前提先事先装过 ...

  4. Ubuntu 开启SSH 以及LAMP环境安装

    1. 更新 apt-get sudo apt-get update 2.安装 openssh sudo apt-get install openssh-server 3.设置root账号密码 sudo ...

  5. Tokumx 代替 Mongodb 群集部署

    一, 配置环境: 系统: CentOS 7 x64 tokumx1 ip: 192.168.0.155 tokumx2 ip: 192.168.0.156 tokumx3 ip: 192.168.0. ...

  6. mysqlslap 使用总结

    mysqlslap 可以用于模拟服务器的负载,并输出计时信息.其被包含在 MySQL 5.1 的发行包中.测试时,可以指定并发连接数,可以指定 SQL 语句.如果没有指定 SQL 语句,mysqlsl ...

  7. STM8的GPIO驱动

    芯片的外设一般按照这么几个流程来进行,GPIO,外部中断,定时器,串口,ADC,IIC,SPI,下面我就按照各个模式来写 首先是GPIO,STM8的GPIO拥有复用功能,这句话告诉我们必然需要配置IO ...

  8. MySql5.6设置慢查询

    ---恢复内容开始--- 在my.cnf中 mysqld节点下 #开启慢查询 slow_query_log = ON #设置超时时间 slow_launch_time = 2 #记录日志 slow_q ...

  9. Visual Studio 2012 开发环境配置+控制台工具+桌面应用程序

    一.界面布局视图设置 1.窗口的布局.控制台窗口运行恢复到开发环境的设置方法 也可以保存好设好的个性化设置,导入设置: 2.视图|服务器资源管理器(sever explorer) 可以访问数据源.服务 ...

  10. linux在线预览pdf文件开发思路

    准备:swftools,flexpaper 基本思路: 1,将pdf文件转化成swf文件 2,使用flexpaper预览swf文件 主要代码: 1,在linux中安装swftools.官网下载swft ...