<!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. Scrapy框架中的CrawlSpider

    小思考:如果想要通过爬虫程序去爬取”糗百“全站数据新闻数据的话,有几种实现方法? 方法一:基于Scrapy框架中的Spider的递归爬取进行实现(Request模块递归回调parse方法). 方法二: ...

  2. C++学习之 类

    1.类规范 类声明:包括数据成员.成员函数(共有接口)的声明 类方法定义 C++程序员将接口(类)放在头文件中,将实现放在源代码文件中 类设计尽量将共有接口和实现细节分开,数据隐藏(将数据放在私有部分 ...

  3. Codejam Qualification Round 2019

    本渣清明节 闲里偷忙 做了一下codejam 水平不出意外的在投稿之后一落千丈 后两题的hidden test竟然都挂了 A. Foregone Solution 水题,稍微判断一下特殊情况(比如10 ...

  4. 《Linux内核分析》 第五节 扒开系统调用的三层皮（下）

    <Linux内核分析> 第五节 扒开系统调用的三层皮(下) 20135307 一.给MenusOS增加time和time-asm命令 给MenuOS增加time和time-asm命令需要 ...

  5. LeetCode-----算法448.找到所有数组中消失的数字

    题目: 给定一个范围在  1 ≤ a[i] ≤ n ( n = 数组大小 ) 的 整型数组,数组中的元素一些出现了两次,另一些只出现一次. 找到所有在 [1, n] 范围之间没有出现在数组中的数字. ...

  6. 《实时控制软件设计》之Github提交作业步骤

    在掌握GIT/GITHUB基本操作后,接下来把第一次的编程作业提交到 https://github.com/RTCSD15/HOMEWORK1 ,把第二次的编程作业提交到https://github. ...

  7. Day Seven

    站立式会议 站立式会议内容总结 331 今天完成: 1.主页面 toolbar 菜单修改为点击弹出两个选项:新增计划和书籍 2.点击新增书籍跳转到文件管理器 home按钮为回退至上级目录,后退按钮为c ...

  8. @Autowire和@Resource注解的区别

    1.@Autowire是Spring开发的,而@Resource是jdk开发的 2.@Autowire是按照type来注解的,而@Resource是按照名称来的,如果名称找不到,那么就按照type,, ...

  9. C与C++的编程风格区别

    c和c++都是在实践中发展起来的语言.实用性极强.c是与UNIX/Linux的发展相辅相成的.而C++是B.S为了摆脱c与硬件以及底层过于紧密的苦恼,而开发的语言.C++可以说就是c语言的超集.任何c ...

  10. Linux 文件系统介绍

    目录 1.Linux 分区简介 2.文件的类型 3.文件的属性与权限 4.直达底部 一.Linux 分区简介 与 windows 通过 盘符管理各个分区不同,Linux把所有设备和文件都当作文件来管理 ...