<!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. STM32下载Bin文件的几种方式

    一.STM32 ST-LINK Utility 1.下载安装软件 官网下载地址:http://www.st.com/zh/development-tools/stsw-link004.html 百度网 ...

  2. #个人博客作业Week1----关于软件和软件工程的出现

    1.软件工程这个词如何出现的? 数学与电脑科学先锋Margaret Hamilton在开发阿波罗11号软件的期间发明的,目的是将软件与硬件还有其他工程学类做出区别,为软件以及那些发明者争取应有的正统性 ...

  3. The role of the inter-controller consensus in the placement of distributed SDN controllers

    2017 Computer Communications 问题:in-band网络的多控制器放置问题,考虑到多个控制器之间的同步(Ctr-Ctr)可能影响到控制器与交换机(Ctr-Sw)的时延: 关于 ...

  4. ibmv7000查看序列号

    ssh后 命令:lsenclosure 有以下数据 id status   type      managed IO_group_id IO_group_name product_MTM serial ...

  5. HDU 2022 海选女主角

    http://acm.hdu.edu.cn/showproblem.php?pid=2022 Problem Description potato老师虽然很喜欢教书,但是迫于生活压力,不得不想办法在业 ...

  6. robotframework+Selenium2Library 模态窗口的处理

    原文链接:https://www.cnblogs.com/zuola/p/5750018.html   所谓模态窗口,就是指除非采取有效的关闭手段,用户的鼠标焦点或者输入光标将一直停留在其上的对话框. ...

  7. Codeforces 68D - Half-decay Tree

    题意 有一颗高度为 \(h\) 的完全二叉树(即点数为 \(2^{h+1}-1\) ),有两种操作: add x y 给 \(x\) 点的权值加 \(y\) decay 一次衰变定义为选择一个叶子节点 ...

  8. Play with Floor and Ceil UVA - 10673（拓展欧几里得）

    因为我现在还不会用这个...emm...蒟蒻...只看了 从来没用过....所以切一道水题...练一下... 人家讲的很好  https://blog.csdn.net/u012860428/arti ...

  9. Oracle 查看正在执行的SQL语句

    SELECT A.MACHINE, username,a.SID,a.SERIAL#, sql_text,LOGON_TIME from v$session a, v$sql b where a.sq ...

  10. 【题解】 bzoj4472: [Jsoi2015]salesman （动态规划）

    bzoj4472,懒得复制,戳我戳我 Solution: 题面意思:从\(1\)号节点出发,每到一个节点就必须停下,获得节点权值(每个节点只会获得一次),每个点有个规定的停留次数,求最大可获得多大权值 ...