createLinearGradient

addColorStop

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>createLinearGradient</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.createLinearGradient(0, 0, 200, 0);

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

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

    ctx.fillStyle = grd;

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

    </script>

</body>

</html>

Canvas createLinearGradient 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. Canvas createRadialGradient API

    Canvas createRadialGradient API <!DOCTYPE html> <html lang="en"> <head> ...

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

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

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

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

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

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

随机推荐

  1. win7 安装 vagrant + centos + virtualbox

    Vagrant 是一款用来构建虚拟开发环境的工具,非常适合 php/python/ruby/java 这类语言开发 web 应用,“代码在我机子上运行没有问题”这种说辞将成为历史. 我的是在win7系 ...

  2. 百度网盘API的操作--PCS 百度个人云存储 上传 ，下载文件

    来自http://blog.csdn.net/u014492257/article/details/39856403 另外需要所有API使用方法的请访问本人上传的资源(需要3个下载分的)链接: htt ...

  3. 【HighCharts系列教程】六、去除highCharts版权信息的几种方法

    方法一:单个图表去除版权 设置Credits属性为不可用,也就是credits中enable=false,具体代码如下 <script type="text/javascript&qu ...

  4. Total Highway Distance

    Total Highway Distance 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Little Hi and Little Ho are playing a ...

  5. 关于配置Tomcat的URIEncoding

    遇到的问题: 程序需要发送http GET请求到服务器,请求的参数中包含了中文字符.程序中参数为UTF-8格式,且经过了UTF-8 URL编码再发送.使用的tomcat服务器,但服务器端后台程序中取到 ...

  6. PHP 页面缓冲函数

    1.flush:刷新缓冲区的内容,输出.函数格式:flush()说明:这个函数经常使用,效率很高.2.ob_start :打开输出缓冲区函数格式:void ob_start(void)说明:当缓冲区激 ...

  7. OPENCV直方图与匹配

    直方图可以用来描述不同的参数和事物,如物体的色彩分布,物体的边缘梯度模版以及目标位置的当前假设的概率分布. 直方图就是对数据进行统计的一种方法,并且将统计值定义到一系列定义好的bin(组距)中,获得一 ...

  8. Android 编译错误

    本人使用的是Android studio1.3版本,前几天调试通过的项目,现在编译出现了错误.错误信息如下 Project app: apk dependencies can only be jars ...

  9. Pycharm之远程编程

    mac上似乎暂时不支持. File->New Project 然后Location里选择你存放项目的地址 然后在Interpreter后面的齿轮状(下图红色处)点击后选择Add Remote. ...

  10. ASIHTTPRequest异步请求

    我们运行程序,如果网速很慢,查询的时候会一直黑屏,直到请求结束画面才出现,这样用户体验很不好.因此同步请求一般只是在某个子线 程中使用,而不在主线程中使用.异步请求的用户体验要比同步请求好,因此一般情 ...