<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>渐变的矩形</title>

<script>

    window.onload = function(){

        var c = document.getElementById('c');

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

        //创建线型渐变对象

        var jb = ctx.createLinearGradient(,,,);

            jb.addColorStop(,'red');

            jb.addColorStop(.,'green');

            jb.addColorStop(.,'orange');

            jb.addColorStop(,'blue');

        ctx.fillStyle = jb;

        ctx.fillRect(,,,);      //x起点, y起点, x终点， y终点

    }

</script>

</head>

<body>

    <canvas id="c" width="" height="" ></canvas>

</body>

</html>

canvas描绘渐变的矩形的更多相关文章

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

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

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

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

  3. canvas设置渐变

    canvas设置渐变 方法 createLinearGradient(x1, y1, x2, y2) 线性渐变 createRadialGradient(x1, y1, r1, x2, y2, r2) ...

  4. canvas放射性渐变填充

    今天在学习canvas时,遇到canvas的fillstyle有一个createRadialGradient()方法,创建放射性渐变. 上代码: <!DOCTYPE html> <h ...

  5. Canvas使用渐变之-线性渐变详解

    在canvas里面,除了使用纯色,我们还能把填充和笔触样式设置为渐变色:线性渐变和径向渐变. 线性渐变 createLinearGradient(x0,y0,x1,y1)  返回 CanvasGrad ...

  6. Canvas绘制渐变

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

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

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

  8. Javascript高级编程学习笔记（92）—— Canvas(9) 渐变

    渐变 渐变由 canvasGradient 实例表示 要创建一个渐变对象需要调用 createLinearGradient() 方法 该方法接收四个参数: 起点的x坐标 起点的y坐标 终点的x坐标 终 ...

  9. html5 canvas 径向渐变2

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

随机推荐

  1. 第二十一章 Django的分页与cookie

    第二十一章 Django的分页与cookie 第一课 模板 1.模板的继承 在Template目录下新建模板master.html <!DOCTYPE html> <html lan ...

  2. 针对Student表的DAO设计实例

    完整代码以及junit,mysql--connector包下载地址 : https://github.com/CasterWx/MyStudentDao 表信息: 代码: dao包----impl包- ...

  3. xadmin与admin设置

    xadmin : 导入xadmin pip install xadmin 路由设置: import xadmin urlpatterns = [ url(r'^xadmin/', xadmin.sit ...

  4. [Code] 中缀式转后缀式

    [Code] 中缀式转后缀式 概要 对于一个可带括号的中缀四则运算表达式, 例如30 + 4 / 2 或 30 / ( 4 + 2 ), 下面代码将分别转换为对应的后缀表达形式 30 4 2 / + ...

  5. MSQL的基准测试

    Mysql基准测试 基准测试 直接.简单.易于比较,用于评估服务器的处理能力 压力测试 对真实的月数据进行测试,获得真是系统所能承受的压力 基准测试的目的 1.建立MySQL服务器的性能基准线 2.模 ...

  6. FusionCharts报错

    1.具体报错如下 SCRIPT 5007:无法获取属性"SetReturnValue"的值: 对象为空或未定义 script block(158),行1字符158 2.错误原因 3 ...

  7. Java获取某年某月的第一天

    Java获取某年某月的第一天 1.设计源码 FisrtDayOfMonth.java: /** * @Title:FisrtDayOfMonth.java * @Package:com.you.fre ...

  8. Caused by: java.lang.ClassNotFoundException: com.mchange.v2.ser.Indirector

    1.错误描述 usage: java org.apache.catalina.startup.Catalina [ -config {pathname} ] [ -nonaming ] { -help ...

  9. iOS - Quartz 2D 下载进度按钮绘制

    1.绘制下载进度按钮 具体实现代码见 GitHub 源码 QExtension QProgressButton.h @interface QProgressButton : UIButton /// ...

  10. httppost的用法（NameValuePair（简单名称值对节点类型）核心对象）

    一,案例一 定义了一个list,该list的数据类型是NameValuePair(简单名称值对节点类型),这个代码多处用于Java像url发送Post请求.在发送post请求时用该list来存放参数. ...