<!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. uva12325 暴力枚举

    这题刚开始我就贪心,直接wrong了,贪心适合可以取一个物体部分的题. 还是老实枚举吧,注意枚举要分类,不然可能会超时,还有注意答案是long long AC代码: #include<cstdi ...

  2. hibernate框架基础描述

    在hibernate中,他通过配置文件(hibernate,cfg.xml)和映射文件(...hbm.xml)把对象或PO(持久化对象)映射到数据库中表,然后通过操作持久化对象,对数据库进行CRUD. ...

  3. C++ 监测磁盘空间

    硬盘管理器 头文件 HardDiskManager.h : #if _MSC_VER > 1000 #pragma once #endif #include <windows.h> ...

  4. Navicat远程连接阿里云服务器的mysql

    问题描述: 本机为win10,mysql安装在阿里云(Ubuntu系统)上,本机使用Navicat远程连接mysql,遇到一些坑,求助于阿里云,最终解决,特此记录一下! 安装mysql sudo ap ...

  5. 3_Longest Substring Without Repeating Characters -- LeetCode

    C++解法一: class Solution { public: int lengthOfLongestSubstring(string s) { ] = {},left = , res = ; ; ...

  6. OkHttp拆解之调用流程图

  7. freemarker写select组件报错总结（三）

    1.错误描述 <html> <head> <meta http-equiv="content-type" content="text/htm ...

  8. Jquery ajaxfileupload.js结合.ashx文件实现无刷新上传

    先上几张图更直观展示一下要实现的功能,本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2 ...

  9. ftp搭建 与http服务访问

    Linux安装ftp组件 1 FTP http://jingyan.baidu.com/article/380abd0a77ae041d90192cf4.html安装vsftpd组件 安装完后,有/e ...

  10. Dijkstra算法与Bellman - Ford算法示例（源自网上大牛的博客）【图论】

    题意:题目大意:有N个点,给出从a点到b点的距离,当然a和b是互相可以抵达的,问从1到n的最短距离 poj2387 Description Bessie is out in the field and ...