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

        //添加颜色端点

        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.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.closePath();

    }

}

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

    <!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 对角线渐变

    <!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. 基于skip-gram做推荐系统的想法

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

  2. 关于T/G/M/K

    //扫盲贴 K, G, T,都是表数量,只是个数字,在不同的场合下表示的不同.在计算机行业中,这几个量可用来表示数据传输速度和容量,下面分别讨论,希望不了解的朋友不要被某知道上的误解了.如果有什么错误 ...

  3. Apache服务器出现Forbidden 403错误提示的解决方法总结

    在配置Linux的 Apache服务时,经常会遇到http403错误,我今天配置测试时也出现了,最后解决了,总结了一下.http 403错误是拒绝访问的意思,有很多原因的.还有,这些问题在win平台的 ...

  4. kafka学习总结之集群部署和zookeeper

    1.  集群部署 kafka集群的瓶颈主要在网络和磁盘上:kafka依赖于zookeeper,zookeeper集群的节点采用奇数个,3个节点允许一个节点失败,5个节点允许2个节点失败. 图 1 ka ...

  5. 4 vuex的安装

    安装可以看,引入又问题https://blog.csdn.net/u014196765/article/details/78022065?locationNum=9&fps=1(引入) htt ...

  6. Http建立连接的方式

    1.协议简介 Http 协议:应用层协议 TCP 协议:传输层协议,主要解决如何在IP层之上可靠的传递数据包,使在网络上的另一端收到发端发出的所有包,并且顺序与发出的顺序一致,TCP具有可靠,面向连接 ...

  7. Jenkins配置匿名用户拥有只读权限

    场景:查看cucumber reporting测试报告时需要登陆,比较麻烦 解决:允许匿名用户拥有只读权限 操作:Jenkins->系统管理->全局安全配置->授权策略,勾选“All ...

  8. python自动化之爬虫模拟登录

    http://selenium-python.readthedocs.io/locating-elements.html ####################################### ...

  9. MT【110】巧设法向量解决距离问题

    分析:设面的法向量$n=(x,y,z)$

  10. 【题解】 [ZJOI2008] 泡泡堂（贪心/二分图/动态规划）

    懒得复制,戳我戳我 Solution: 就是有一个贪心策略:(以下假设使\(A\)队分数更高) \(First:\)比较两个分值的最小值,如果\(A\)最小分比\(B\)最小分大就直接比较两个最小的, ...