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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>填充渐变形状</title>

<script src="js/modernizr.js"></script>

</head>

<body>

<script type="text/javascript">

window.addEventListener('load',eventWindowLoaded,false);

function eventWindowLoaded(){

    canvasApp();

}

function canvasSupport(){

    return Modernizr.canvas;

}

function canvasApp(){

    if(!canvasSupport()){

        return;

    }else{

        var theCanvas = document.getElementById('canvas')

        var context = theCanvas.getContext("2d")

    }

    drawScreen();

    function drawScreen(){

        //水平渐变值必须保持为0

        var gr = context.createLinearGradient(0,0,100,0);

        //添加颜色端点

        gr.addColorStop(0,'rgb(255,0,0)');

        gr.addColorStop(.5,'rgb(0,255,0)');

        gr.addColorStop(1,'rgb(0,0,255)');

        //应用fillStyle生成渐变

        context.fillStyle = gr;

        context.beginPath();

        context.moveTo(0,0);

        context.lineTo(50,0);

        context.lineTo(100,50);

        context.lineTo(50,100);

        context.lineTo(0,100);
        //将水平渐变应用到复杂形状

        context.lineTo(0,0);

        context.stroke();

        context.fill();
//context.fill();将当前的fillStyle填充到形状中

        context.closePath();

    }

}

$(document).ready(function(e) {

});

</script>

<canvas id="canvas" width="500" height="500">

你的浏览器无法使用canvas

小白童鞋；你的支持是我最大的快乐！！

</canvas>

</body>

</html>

html5 canvas 奇怪的形状水平渐变（因为大多数的之前的文章把基础都打过了，所以开始写的快了，如果有不明白的，可以回顾下之前的）的更多相关文章

  1. html5 canvas 奇怪的形状垂直渐变

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

  2. [HTML5] Canvas绘制简单形状

    使用canvas来进行绘画,它像很多其他dom对象一样,有很多属性和方法,操作这些方法,实现绘画 获取canvas对象,调用document.getElementById()方法 调用canvas对象 ...

  3. HTML5 canvas createRadialGradient()放射状/圆形渐变

    定义和用法 createLinearGradient() 方法创建放射状/圆形渐变对象. 渐变可用于填充矩形.圆形.线条.文本等等. 提示:请使用该对象作为 strokeStyle 或 fillSty ...

  4. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  5. html5 Canvas API

    详细内容请点击 1.HTML Canvas API有两方面优势可以弥补:首先,不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好:其次,在其他编程语言现有的优秀二维绘图API的基础上实现C ...

  6. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  7. html5 canvas 多个填充渐变形状

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

  8. html5 canvas 填充渐变形状

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

  9. html5 canvas 水平渐变描边

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

随机推荐

  1. [算法总结] 6 道题搞定 BAT 面试——堆栈和队列

    本文首发于我的个人博客:尾尾部落 0. 基础概念 栈:后进先出(LIFO) 队列:先进先出(FIFO) 1. 栈的 java 实现 import java.util.Arrays; public cl ...

  2. Harbor 学习分享系列1 - centos7.4安装harbor1.5.2

    centos7.4安装harbor1.5.2 前言 本系列分享将Harbor有关教程:分享形式会以百度云盘的形式进行分享,主要教程将以markdown格式进行分享:建议使用markdownpad2这款 ...

  3. Network Mapper 嗅探工具

    1. nmap (目标ip地址 xxx.xxx.xxx.xxx) - 例子:nmap xxx.xxx.xxx.xxx2. nmap自定义扫描 - 例子:nmap -p(端口号) xxx.xxx.xxx ...

  4. PAT甲题题解-1115. Counting Nodes in a BST (30)-（构建二分搜索树+dfs）

    题意:给出一个序列,构建二叉搜索树(BST),输出二叉搜索树最后两层的节点个数n1和n2,以及他们的和sum: n1 + n2 = sum 递归建树,然后再dfs求出最大层数,接着再dfs计算出最后两 ...

  5. JSP JSTL知识结构图

    自行绘制,欢迎指正.

  6. 安装VS2013

       安装VS2013, 之前就有VS2010,安装了一个多小时,纠结,下面是截图.   1.安装   2.登录,之前就有账号了       3.这就是VS2013了.     4.测试     5通 ...

  7. 如何用Qt自动拷贝exe依赖的dll

    QT生成的.exe文件不能运行的解决办法 之前的数独项目的GUI,当我的Qt项目生成exe时,由于缺少了相关的依赖dll文件,打开会一直报缺少依赖文件的错: 然后一开始我到安装的Qt文件夹里把这些有Q ...

  8. JIRA部署破解和confluence整合

    JIRA是一个项目跟踪管理工具,帮助团队创建计划任务.构建并发布优秀的产品.全球成千上万的团队选择JIRA,用JIRA来捕获.组织管理缺陷.分配任务,跟踪团队的活动.不论在桌面PC还是移动终端设备上, ...

  9. BZOJ4654 NOI2016国王饮水记（动态规划+三分）

    有很多比较显然的性质.首先每个城市(除1外)至多被连通一次,否则没有意义.其次将城市按水位从大到小排序后,用以连通的城市集合是一段前缀,并且不应存在比1城市还小的.然后如果确定了选取的城市集合,每次选 ...

  10. BZOJ1492 货币兑换 CDQ分治优化DP

    1492: [NOI2007]货币兑换Cash Time Limit: 5 Sec  Memory Limit: 64 MB Description 小Y最近在一家金券交易所工作.该金券交易所只发行交 ...