<!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. 微信小程序学习笔记（2）--------框架之目录结构

    框架提供了自己的视图层描述语言 wxml 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统. 一.响应的数据绑定 框架的核心是一个响应的数据绑定 ...

  2. 1044: [HAOI2008]木棍分割

    1044: [HAOI2008]木棍分割 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2161  Solved: 779[Submit][Statu ...

  3. spring security使用hibernate进行查询数据库验证

    前面查询数据库采用的都是jdbc方式,如果系统使用的是hibernate,该如何进行呢,下面就是实现步骤,关键还是实现自定义的UserDetailsService 项目结构如下: 使用hibernat ...

  4. Spring Cloud 之Spring-Security

    对于Spring-Security首先要明白这么几点: 1.什么是SpringSecurityurity2.SpringSecurity应用场景3.SpringBoot整合Security4.Secu ...

  5. Contest-hunter 暑假送温暖 SRM01

    一直找不到好的题去做...于是想到了srm...回来补题...QAQ 从srm01补起 A 题意:n个数,排成一列,刚开始都是1,如果左右相等就可以合并,问最后的数列长什么样. 思路:比赛的时候直接敲 ...

  6. spring data redis的使用jar包版本冲突问题

    spring data redis 与spring 版本之间会有不兼容,要求spring 最低版本为4.2.6,这里推荐的一个版本 spring 4.3.2  spring data redis 1. ...

  7. 调用webservices中 枚举类型没有被序列化问题

    引用服务后,代理类为自动为所有枚举类型生成了一个Bool类型相关字段,命名方式:比如枚举类名为“PayType”,生成的相关字段为“PayTypeSpecified”,此字段有何作用? PayType ...

  8. php异常处理笔记

    <?php header("Content-type:text/html;charset=utf-8"); // try // { // //业务处理 错误时抛出异常. // ...

  9. nodejs 设计模式

    1 . 单例模式 顾名思义,单例就是保证一个类只有一个实例,实现的方法是,先判断实例是否存在,如果存在则直接返回,若不存在,则创建实例对象,并将实例对象保存在静态变量中,当下次请求时,则可以直接返回这 ...

  10. .net 数据脱敏代码实现

    方案一: DTO中处理: private string idNumber; /// <summary> /// 身份证号码 /// </summary> [Column(&qu ...