<!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. uwsgi+django架构程序内部无法获取全局变量

    近期开发了一个djangoi程序,用django自带的python manage.py runserver 0.0.0.0:80 运行方式无任何问题,但用django+nginx+uwsg部署运行有时 ...

  2. 树莓派3b安装Nginx和php7和百度语音合成模块

    1.安装sox系统mp3音频播放模块(项目需要) sudo apt-get install lame sudo apt-get install sox sudo apt-get install lib ...

  3. PHP学习 安装环境和语法学习

    要回归技术了,昨天下午专门去深圳大学城图书馆借书,甚是漂亮 禁不住搞了几张照片 在图书馆里面的书真多,图书馆环境真好,清华大学 北京大学研究生院的学生们有福了,最后一句深圳政府真尼玛有钱,下图是图书馆 ...

  4. We are a 团队

    虽然在团队中只是拖后腿的存在,但是几个人一起摸索着前进也确实有着不一样的感觉. 我们队伍共有五个人:董强强.张振鑫.王鼎.高庆阳还有我(排名不分先后) 我们有自己的关于软件工程的QQ群,会在群里讨论一 ...

  5. 更新pip10后 ImportError: cannot import name ‘main'

    百度了几个回答都没有解决问题,有些回答明显是直接复制过来的一点价值都没有,然后google一下立马解决.很多时候不能怪搜索引擎,问题出在一些国内网友对知识的不负责任 解决:找到报错文件,也就是那个pi ...

  6. 初学Nutch之简介与安装

    1.Nutch简介 Nutch是一个由Java实 现的,开放源代码(open-source)的web搜索引擎.主要用于收集网页数据,然后对其进行分析,建立索引,以提供相应的接口来对其网页数据进行 查询 ...

  7. ElasticSearch 2 (11) - 节点调优（ElasticSearch性能）

    ElasticSearch 2 (11) - 节点调优(ElasticSearch性能) 摘要 一个ElasticSearch集群需要多少个节点很难用一种明确的方式回答,但是,我们可以将问题细化成一下 ...

  8. FINAL视频预发布

    视频地址:http://v.youku.com/v_show/id_XMTg0MjMzNDIwNA==.html?spm=a2hzp.8253869.0.0&from=y1.7-2

  9. 移动硬盘插到台式机，外接网卡无法连接wifi处理

    在网上买了一个希捷500G的移动硬盘,避免供电不足,硬盘需要插到台式机后面,高高兴兴的通过USB连接了,发现硬盘可以用,然后打算网上查询是否正品,发现不能连接网络了,我是台式机,用360wifi作为无 ...

  10. Ubuntu18.04 安装后的简单实用设置[未完成]

    1. 安装完成. 2. 更新 sudo apt-get update 3. 修改vi 放置键盘错位的问题 编辑文件/etc/vim/vimrc.tiny 将“compatible”改成“nocompa ...