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. [iOS]C语言技术视频-12-指针变量练习二(数组打印)

    下载地址: 链接: http://pan.baidu.com/s/1mg7ZwUW 密码: p8e6

  2. SIFT

    简介 SIFT(scale invariant feature transform)——尺度不变特征转换,用来检测和描述局部特征,运用范围包括object recognition(目标检测), rob ...

  3. javascript 中的闭包

    在 javascript 中,函数可以当做参数传递,也可以当做返回值返回. 当一个函数内部返回值为一个函数时, 就形成了闭包.(闭包里面的 this 问题) 如下面代码 Function.protot ...

  4. Pythagorean Triples

    Pythagorean Triples time limit per test 1 second memory limit per test 256 megabytes input standard ...

  5. linux iptables 相关设置

    首先在使用iptables之前敲入一下两条命令 > iptables -F   #这句话的意思是清空所有的链 > iptables -X  #这句话的意思是清空所有自定义的链 以上两条的含 ...

  6. Struts1、2种如何防止表单重复提交和两者的区别

    使用token指令牌就行了.在进入标签之前的action中通过saveToken方法保存指令牌.在表单提交后的action中判断这个token是否存在,如果存在允许插入,并通过resetToken把t ...

  7. CodeForces 620E New Year Tree

    线段树+位运算 首先对树进行DFS,写出DFS序列,记录下每一个节点控制的区间范围.然后就是区间更新和区间查询了. 某段区间的颜色种类可以用位运算来表示,方便计算. 如果仅有第i种颜色,那么就用十进制 ...

  8. iOS10适配——错误：Code=3000

    error : Error Domain=NSCocoaErrorDomain Code=3000 "未找到应用程序的“aps-environment”的权利字符串" UserIn ...

  9. CSU 1515 Sequence

    莫队算法+map #include<cstdio> #include<cstring> #include<cmath> #include<map> #i ...

  10. dsp与dmp的cookie mapping

    dsp   ad.com   在  meijiu.com上部署广告. 假设dmp叫cm.api.taobao.com 建立gid映射表 (1) ad.com在meiju.com的页面上部署,指向dmp ...