<!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.strokeStyle = gr;

        context.strokeRect(0,0,100,100);

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

        context.strokeRect(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. HTML5 Canvas 填充与描边(Fill And Stroke)

    HTML5 Canvas 填充与描边(Fill And Stroke) 演示HTML5 Canvas Fill 与Stroke文字效果,基于Canvas如何实 现纹理填充与描边. 一:颜色填充与描边 ...

  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 径向渐变2

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

  6. html5 canvas 径向渐变

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

  7. HTML5 Canvas ( 径向渐变, 升级版的星空 ) fillStyle, createRadialGradient

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. HTML5 Canvas ( 线性渐变, 升级版的星空 ) fillStyle, createLinearGradient, addColorStop

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. html5 canvas图片渐变

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. nodejs 监控代码变动实现ftp上传

    被动模式下 //https://www.npmjs.com/package/watch //文件同步功能 var watch = require('watch'); var path = requir ...

  2. DRF02

    1. 视图 Django REST framwork 提供的视图的主要作用: 控制序列化器的执行(检验.保存.转换数据) 控制数据库查询的执行 1.1. 请求与响应 1.1.1 Request RES ...

  3. 科普贴 | 以太坊代币钱包MyEtherWallet使用教程，一步步教你玩转MEW

    MyEtherWallet 是一个以太坊的网页钱包,使用非常简单,打开网页就可以使用,源代码开源,不会在服务器上存储用户的钱包信息如私钥和密码.支持 Ledger Wallet.TREZOR 等硬件钱 ...

  4. “数学口袋精灵”App的第一个Sprint计划

    一.现状 我们这个团队想制作一个关于运算的游戏类型手机软件,针对我们这个学期的Android软件开发的课程,制作出一个关于数学算术游戏软件. 二.任务认领 第一阶段先把静态网页制作出来,各自的任务: ...

  5. Python爬虫：学爬虫前得了解的事儿

    这是关于Python的第14篇文章,主要介绍下爬虫的原理. 提到爬虫,我们就不得不说起网页,因为我们编写的爬虫实际上是针对网页进行设计的.解析网页和抓取这些数据是爬虫所做的事情. 对于大部分网页来讲, ...

  6. OneZero第四周第四次站立会议（2016.4.14）

    1. 时间: 15:00--15:10  共计10分钟. 2. 成员: X 夏一鸣 * 组长 (博客:http://www.cnblogs.com/xiaym896/), G 郭又铭 (博客:http ...

  7. 关于链表的总结（C++循环实现）

    0.目录 1.链表的基本操作 1.1 结点定义 1.2 创建链表 1.3 销毁链表 1.4 打印链表 1.5 获取链表长度 2.结点的基本操作 2.1 删除结点 2.2 查找结点 3.面试题 3.1 ...

  8. Session in BSU CodeForces - 1027F（思维 树 基环树 离散化）

    题意: 有n门考试,每门考试都有两个时间,存在几门考试时间冲突,求考完所有的考试,所用的最后时间的最小值 解析: 对于时间冲突的考试 就是一个联通块 把每个考试看作边,两个时间看作点,那么时间冲突的考 ...

  9. SECD machine

    SECD machine 对程序语言理论的理解 程序语言理论主要研究语法.语义及语言的实现.编程语言有语法,各种数学逻辑.结构化数据都有语法.乔姆斯基的语言体系及巴科斯范式是语法分析的基础,语法分析将 ...

  10. 【题解】 Luogu P1402 酒店之王 （二分图匹配）

    懒得复制,原题目戳我 Solution: 这题没想到这么水,就是两个二分图而已 如果房间的二分图没匹配成功就直接进入下一个人 如果房间的二分图匹配成功,食物二分图匹配不成功就把房间的\(be[ ]\) ...