<!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. django基础2： 路由配置系统，URLconf的正则字符串参数，命名空间模式，View（视图），Request对象，Response对象，JsonResponse对象，Template模板系统

    Django基础二 request request这个参数1. 封装了所有跟请求相关的数据,是一个对象 2. 目前我们学过1. request.method GET,POST ...2. reques ...

  2. 【工具】PC端调试手机端 Html 页面的工具

    一.概述 有一个项目需要在手机端显示一个 web 页面,而每次把应用 launch 后,从手机端看比较麻烦,因此搜罗了几种在 PC 端调试手机端页面的工具. 二.工具 http://fonkie.it ...

  3. unity,如何手动或者使用代码更换材质

    在unity中,我们可能需要更换怪物的贴图,来达到以下效果 方法1:手动配置 找到自己配置好的扩展名为.mat的文件,在怪物的节点找到带Mesh Render的子元素,将其拖放到如图位置 方法2:代码 ...

  4. Windows netstat 查看端口、进程占用(转)

    本文转自:http://ywsm.iteye.com/blog/510670 目标:在Windows环境下,用netstat命令查看某个端口号是否占用,为哪个进程所占用. 操作:操作分为两步: 1)查 ...

  5. 关于git bash的问题,pull不下来(登录之后，git帮你记住了，想切换其他用户)

    参考博客: https://www.jianshu.com/p/8a7f257e07b8 从某个项目地址pull代码下来,老是报错 fatal: Authentication failed for ' ...

  6. ubuntu16.04 虚拟机 安装win7/win10

    http://www.xitongcheng.com/jiaocheng/xtazjc_article_26588.html https://blog.csdn.net/sunyao_123/arti ...

  7. github Git-fork-别人的项目后更新代码的方法

     用github还处于菜的阶段,遇到问题简单记录.   举个例子,需要 fork 这个项目 https://github.com/tarobjtu/WebFundamentals.git 点击 for ...

  8. django使用migrations迁移版本和数据库中报错解决方案

    1.到数据库表django_migrations中查看app中看看app列 2.到项目对应的app模块中打开migrations文件查看生成的文件与数据库app列中的是不是一样 3.找到哪里不一致的文 ...

  9. 程序包com.sun.istack.internal不存在

    添加一下依赖 <!-- https://mvnrepository.com/artifact/com.sun.xml.bind/jaxb-impl --><dependency> ...

  10. camera corder profile

    /system/etc/ 其中的qulity high 必须与 最大的支持的分辨率相同. 不然cts 不过. 这里的配置必须在报告给app的数据匹配.