<!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.fillRect(0,0,100,100);

        context.fillRect(0,100,50,100);

        context.fillRect(0,200,200,100);

    }

}

</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. [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置

    接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...

  3. html5 canvas用图案填充形状

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

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

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

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

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

  6. HTML5 Canvas渐进填充与透明

    详细解释HTML5 Canvas中渐进填充的参数设置与使用,Canvas中透明度的设置与使 用,结合渐进填充与透明度支持,实现图像的Mask效果. 一:渐进填充(Gradient Fill) Canv ...

  7. HTML5<canvas>标签:使用canvas元素在网页上绘制渐变和图像(2)

    详细解释HTML5 Canvas中渐进填充的参数设置与使用,Canvas中透明度的设置与使用,结合渐进填充与透明度支持,实现图像的Mask效果. 一:渐进填充(Gradient Fill) Canva ...

  8. [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标

    有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...

  9. 【canvas】伸缩 / 剪裁 / 文本 / 阴影 / 填充图案 / 填充渐变

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

随机推荐

  1. 冒泡排序算法的C++,Java和Python实现和冒泡排序算法三种语言效率的比较

    冒泡排序原理: 这一篇百度经验讲得很好,我不多说了 https://jingyan.baidu.com/article/6525d4b13f920bac7d2e9484.html 他讲的是C语言,没有 ...

  2. python+Selenium 环境搭建

    一.下载相关软件 1.python http://python.org/getit/ 2.setuptools http://pypi.python.org/pypi/setuptools 3.pip ...

  3. 【容器魔方解读】AWS Re:Invent 2018大会

    每年云计算领域技术与商业风向标之一的AWS Re:Invent大会上周在美国拉斯维加斯召开,如往届一样,AWS密集发布了上百项的新产品或新技术.随着国内近两年云计算尤其是公有云的普及度越来越高,国内各 ...

  4. QUIC和TCP

    作者:henrystark henrystark@126.com Blog: http://henrystark.blog.chinaunix.net/ 日期:20140626 本文遵循CC协议:署名 ...

  5. openstack horizon 开发第三天

    工作流:工作流是带有选项的复杂表单,每个工作流必须包含扩展Workflow, Step和的类Action1. url.py 路由处理 RESOURCE_CLASS = r'^(?P<resour ...

  6. PAT甲题题解-1025. PAT Ranking (25)-排序

    排序,求整体的排名和局部的排名整体排序,for循环一遍同时存储整体目前的排名和所在局部的排名即可 #include <iostream> #include <cstdio> # ...

  7. 一份超全超详细的 ADB 用法大全

    http://blog.csdn.net/u010375364/article/details/52344120

  8. CSAPP lab2 二进制拆弹 binary bombs phase_5

    给出对应于7个阶段的7篇博客 phase_1  https://www.cnblogs.com/wkfvawl/p/10632044.htmlphase_2  https://www.cnblogs. ...

  9. 《Linux内核--分析Linux内核创建一个新进程的过程 》 20135311傅冬菁

    20135311傅冬菁 分析Linux内核创建一个新进程的过程 一.学习内容 进程控制块——PCB  task_struct数据结构 PCB task_struct中包含: 进程状态.进程打开的文件. ...

  10. 实训二（cocos2dx 2.x 打包apk）

    利用cocos2dx编程得到的展现形式之一就是最终的apk,中间的过程只有自己走过才能知道,对于没有章法的初学者,那是相当的头疼, 言归正传,2.x到3.x版本引擎变动很大,除去了CC只是很小一方面, ...