<!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. 如何使用淘宝 NPM 镜像，安装CNPM的方法

    npm 版本需要大于 3.0 前提:安装好npm 环境:Linux 直接在linux下输入命令: npm install -g cnpm --registry=https://registry.npm ...

  2. 使用kubeadm安装kubernetes高可用集群

    kubeadm安装kubernetes高可用集群搭建  第一步:首先搭建etcd集群 yum install -y etcd 配置文件 /etc/etcd/etcd.confETCD_NAME=inf ...

  3. 基于skip-gram做推荐系统的想法

    一.人工智能之自然语言处理 自然语言处理(Natural Language Processing, NLP),是人工智能的分支科学,意图是使计算机具备处理人类语言的能力. “处理人类语言的能力”要达到 ...

  4. PAT甲题题解1098. Insertion or Heap Sort (25)-（插入排序和堆排序）

    题目就是给两个序列,第一个是排序前的,第二个是排序中的,判断它是采用插入排序还是堆排序,并且输出下一次操作后的序列. 插入排序的特点就是,前面是从小到大排列的,后面就与原序列相同. 堆排序的特点就是, ...

  5. JavaScript编码命名规范及格式规范

    变量 局部变量命名采用首字母小写,其它单词首字母大写: //推荐 var printContent = 'hello world' //不推荐,变量名意义不明确 var objext = {}; // ...

  6. LeetCode 633. 平方数之和

    题目: 给定一个非负整数 c ,你要判断是否存在两个整数 a 和 b,使得 a2 + b2 = c.     示例1: 输入: 5 输出: True 解释: 1 * 1 + 2 * 2 = 5 示例2 ...

  7. 网络助手的NABCD分析

    我们小组这次做的软件名字叫为校园网络助手.本校校园网分为内网与外网认证两种,并且有着流量限制,所以我们设计出来了这项软件,它主要有着两项功能:一键WIFI与校内网盘. N--need.在学校里每当流量 ...

  8. Docker 将一堆镜像 导成一个文件

    docker save istio/galley istio/citadel istio/mixer istio/sidecar_injector istio/proxy_init istio/pro ...

  9. SSM 中 BaseController 使用 session

    转载: http://blog.sina.com.cn/s/blog_7085382f0102v9jg.html public class BaseController { //region Http ...

  10. Jamie's Contact Groups POJ - 2289（多重匹配 最大值最小化 最大流）

    Jamie's Contact Groups Time Limit: 7000MS   Memory Limit: 65536K Total Submissions: 8567   Accepted: ...