<!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. 第十八章 DjangoWeb开发框架

    第十八章 DjangoWeb开发框架 第一课 内容概要: 1.JS正则 -登录注册验证 2.组件 1.BootStrap -css -js 学习BootStrap规则 2.jQueryUI -css ...

  2. C编程之 一个容易忽视但是十分严重的小错误

    while(...) { ...if(a=b) continue; } 调试时就一直执行continue.一直找不到原因,后面才发现是少一个"=": 还有一次就是也是在if中,if ...

  3. CODE大全浅谈谷歌adsense与PIN码

    我的博客:CODE大全:www.codedq.net:业余草:www.xttblog.com:爱分享:www.ndislwf.com或ifxvn.com. 近期由于校园招聘笔试和面试等诸多忙碌时间,博 ...

  4. 《android开发艺术探索》读书笔记（六）--Drawable

    接上篇<android开发艺术探索>读书笔记(五)--RemoteViews [BitmapDrawable] 简单的图片 <!xml version="1.0" ...

  5. uva10003 区间DP

    很清晰的区间dp问题.d(i,j)表示断点i到断点j的最小费用,由于开头和结尾也是断点,所以应该加入断点数组,即 cut[0]=0; cut[n+1]=len; 边界就是d(i,i+1)=0; 转移方 ...

  6. JavaScript基础教程1-20160612

    1.javascript是一门浏览器运行的脚本语言和java没关系 2.javascript语言写在哪里? (1)可以写单独的文件里面去调用(推荐采用此方法) index.html <head& ...

  7. django框架 - 实时查看执行的sql语句

    django框架采用的ORM模型,我们可以通过mysql的日志记录实时看到执行的sql语句,具体步骤如下: 第一步:找到mysql的配置文件 第二步:编辑mysql配置文件 第三步:重启mysql 第 ...

  8. mysql数据库基本使用（增删改查）

    数据库db,database 数据库:依照某种数据模型进行组织并存放到存储器的数据集合dbms,database management system 数据库管理系统:用来操作和管理数据库的大型服务软件 ...

  9. 【Unity3D】Unity3D开发《我的世界》之二、创建一个立方体

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/unity_minecraft_02.html 这一篇的内容比较简单,因为所有理论内容都在上一篇中讲到了.但有两点需 ...

  10. 注意Vietnamese_CI_AS排序规则下的特殊字符大小敏感问题

    注意Vietnamese_CI_AS排序规则下的特殊字符大小敏感问题   最近,在SQL Server中遇到了Vietnamese_CI_AS排序规则的特殊字符的大小写敏感问题,是的,你没有看错,这句 ...