<!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. go——方法

    方法是与对象实例绑定的特殊函数.方法是面向对象编程的基本概念,用于维护和展示对象的自身状态.对象是内敛的,每个实例都有各自不同的独立特征,以属性和方法来暴露对外通信接口.普通函数则专注于算法流程,通过 ...

  2. [笔记]Go语言写文件几种方式性能对比

    Go语言中写文件有多种方式,这里进行如下几种方式的速度对比: 打开文件,写入内容,关闭文件.如此重复多次 打开文件,写入内容,defer 关闭文件.如此重复多次 打开文件,重复多次写入内容,defer ...

  3. 62二叉搜索树的第k个结点

    题目描述 给定一颗二叉搜索树,请找出其中的第k大的结点.例如, 5 / \ 3 7 /\ /\ 2 4 6 8 中,按结点数值大小顺序第三个结点的值为4. 思路 二叉搜索树的中序遍历的输出结果是拍好序 ...

  4. Maven实战--- dependencies与dependencyManagement的区别

    在上一个项目中遇到一些jar包冲突的问题,之后还有很多人分不清楚dependencies与dependencyManagement的区别,本篇文章将这些区别总结下来. 1.DepencyManagem ...

  5. 一个linux命令（6/13）：traceroute命令

    通过traceroute 我们可以知道信息从你的计算机到互联网另一端的主机是走的什么路径.当然每次数据包由某一同样的出发点(source)到达某一同样的目的地(destination)走的路径可能会不 ...

  6. C# 获取当前星期几

    private static string GetWeekName() { string weekName = ""; switch (DateTime.Now.DayOfWeek ...

  7. MapReduce:输出是一个文本文件，每一行第一个数字式行标，第二个数字是输入文件中每一行除行标外数字的平均值，且整数不保留小数，小数保留两位小数点

    有时候你会遇到这样的问题:你有一个表格,给出了每个人在十二月,一月和二月的收入. 表格如下: 姓名 一月 二月 三月 楚乔     200   314   3500 宇文玥     2000  332 ...

  8. MyBatis正在爬的坑

    换了份工作,开始接触Mybatis,开一篇文章记录一下自己遇到的坑 2018-06-20 今天遇到了一个问题,编好的sql语句在数据库可以执行但是写到程序里边就GG,什么问题呢?一直纠结在程序哪里写错 ...

  9. HDU 1176 免费馅饼 简单动态规划

    世道很简单的动态规划,但是却错了,让我很无语,改来改去还是不对,第二天有写就对了,之后我就耐着性子慢慢比较之前的错误代码,发现 第一次错:纯粹用了a[i][j]+=max3(a[i+1][j-1], ...

  10. 采用DoGet方式提交中文,乱码产生原因分析及解决办法

    前段时间某功能在测试机器上出现乱码,情况如下:   现象:           调试搜索功能时,通过doGet方法提交到后台的中文参数在本地和开发测试机器上为乱码(Action层),在测试人员测试机器 ...