<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style>

    body {

      text-align: center;

    }

    canvas {

      background: #ddd;

    }

  </style>

</head>

<body>

  <h3>使用渐变对象</h3>

  <canvas id="c5" width="500" height="400"></canvas>

  <script>

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

    //ctx.fillStyle = '#0f0';

    //创建一个渐变对象

    var g = ctx.createLinearGradient(50,100, 450, 100);

    g.addColorStop(0, '#f00');

    g.addColorStop(0.5, '#ff0');

    g.addColorStop(1, '#0f0');

    ctx.fillStyle = g;

    ctx.fillRect(50,100, 400, 200);

    ctx.strokeStyle = g;

//    ctx.strokeRect(50,100, 400,200);

  </script>

</body>

</html>

canvas 创建渐变图形的更多相关文章

  1. [html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形

    在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形.其中 ...

  2. canvas 创建颜色渐变柱状图

    最终结果: 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  3. Canvas绘制渐变

    1.绘制线性渐变 Canvas提供了用于创建线性渐变的函数createLinearGradient(x0,y0,x1,y1),坐标点(x0,y0)是起点 ,(x1,y1)是终点 创建一个渐变色 var ...

  4. H5新特性-canvas绘图--渐变对象路径(最复杂)--图片--变形操作

    今天的目标 3.1:canvas绘图--(重点掌握:渐变对象.路径.图片.变形) 3.2:canvas绘图--渐变对象 线性渐变: linearGradient 径向渐变: var g = ctx.c ...

  5. Canvas使用渐变之-径向渐变详解

    创建径向渐变使用 createRadialGrdient(x0,y0,r0,x1,y1,r1)​ 一共​六个参数,分别代表: 起点的圆心坐标(第一个和第二个参数), 起点园的半径(第三个参数), 终点 ...

  6. HTML5使用Canvas来绘制图形

    一.Canvas标签: 1.HTML5<canvas>元素用于图形的绘制,通过脚本(通常是javascript)来完成. 2.<canvas>标签只是图形容器,必须使用脚本来绘 ...

  7. html5 canvas 填充渐变形状

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. iOS：quartz2D绘图（绘制渐变图形）

    quartzD可以用来绘制渐变图形,即图形向外或向内发散,会变得越来越模糊. 渐变分为线性渐变和径向渐变,所谓线性渐变,就是图形以线的方式发散,发散后一般呈现出矩形的样子:而径向渐变,就是以半径的大小 ...

  9. Android利用canvas画各种图形

    Android利用canvas画各种图形(点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形) 本文链接:https://blog.csdn.net/rhljiayou/article/det ...

随机推荐

  1. Java并发（1）：synchronized

    虽然多线程编程极大地提高了效率,但是也会带来一定的隐患.比如说两个线程同时往一个数据库表中插入不重复的数据,就可能会导致数据库中插入了相同的数据.今天我们就来一起讨论下线程安全问题,以及Java中提供 ...

  2. 微信小程序组件scroll-view

    视图容器scroll-view :官方文档 Demo Code var order = ['red', 'yellow', 'blue', 'green', 'red'] Page({ data: { ...

  3. 从零到一创建ionic移动app：应用anjularjs编写ionic项目

    推荐两篇文章,带你入门 ionic中文项目(作为了解ionic基础结构用):http://blog.csdn.net/i348018533/article/details/47258449/ ioni ...

  4. Leaflet API 翻译（二）

    摘自:http://www.ithao123.cn/content-824673.html L.Point 显示以像素为单位的点的x,y坐标. 所以接受点对象的leaflet方法和选项都也接受他们简单 ...

  5. datagrid 用法

    http://blog.csdn.net/xhhuang1979/article/details/8331682

  6. vue移动端 滚动 鼠标按下效果

    <div class="item" :id="item.RowID" @touchstart="touchstart(item.RowID)&q ...

  7. [转]Linux下RPM软件包的安装及卸载 yum操作

    在 Linux 操作系统下,几乎所有的软件均通过RPM 进行安装.卸载及管理等操作.RPM 的全称为Redhat Package Manager ,是由Redhat 公司提出的,用于管理Linux 下 ...

  8. c#基础-自动内存管理

    1.自动垃圾回收是什么?     在非托管环境下程序员要自已管理内存,由疏忽的原因,通常会犯两种错误,请求内存后在不使用时忘记释放,或使用已经释放了的内存.但在托管环境下,程序员不用担心这两个问题,C ...

  9. Openstack之Nova创建虚机流程分析

    前言        Openstack作为一个虚拟机管理平台,核心功能自然是虚拟机的生命周期的管理,而负责虚机管理的模块就是Nova. 本文就是openstack中Nova模块的分析,所以本文重点是以 ...

  10. QString类

    1.将QString所有字母大写 QString.toUpper() 2.将QString所有字母小写 QString.toLower() 3.获取字符串的字符数 QString.length() 4 ...