<!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. virtualenv使用

    virtualenv安装不同版本的python 来自为知笔记(Wiz)

  2. knit使用安装 ecstore knit位置 及调用路径

    菜鸟一枚,接触php不久. 情况一: 最简单的: windows下, php文件引用kint 将kint放入c盘 php/pear下,我一般将kint包改名字为kint 结构如下: c:/php/pe ...

  3. java.util.Calendar简介

    Calendar是一个抽象类,我们无法直接实例化它,它有一个具体子类实体类java.util.GregorianCalendar,这个类实现的就是我们日常所用的公历历法,或者叫做阳历.我们可以直接使用 ...

  4. Java伪代码示例

    学习并转载自https://www.cnblogs.com/z245894546/p/7535261.html import.java.大道至简.*; import.java.愚公移山.*; publ ...

  5. 认识shiro

    shiro是安全(权限)框架,不仅可以在javase中也可以在javaee中 shiro可以完成认证.授权.加密.会话管理,与web进行集成.缓存等. Authentication:身份认证/登录,验 ...

  6. mysql 5.7快速部署

    目录 一:官网下载mysql二级制包.... 1 二:mysql二级制包解压.... 1 三:设置mysql库文件路径与授权... 1 四. 创建配置文件... 2 五:数据库初始化... 5 六: ...

  7. openstack认证实践

    环境: 客户端:负责发送请求, 服务器:负责接受请求: 认证服务器keystone:负责认证 具体认证步骤: 1.客户端首先进行签名计算,将得到的签名字符串作为authorization发给keyst ...

  8. SQLite教程

    SQLite教程 http://www.runoob.com/sqlite/sqlite-date-time.html SQLite管理工具http://www.sqliteexpert.com/do ...

  9. java用servlet、cookie实现一个阅读记录

    效果如图 代码1 package com.xiaostudy.servlet; import java.io.IOException; import java.io.PrintWriter; impo ...

  10. ASP.NET动态生成GridView的使用

    根据DataTable动态生成包含checkbox的GridView,其中DataTable中对应checkbox那一列的值必须为bool值. public static GridView Dynam ...