1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>渐变描边</title>
  6. <script src="js/modernizr.js"></script>
  7. </head>
  8.  
  9. <body>
  10. <script type="text/javascript">
  11. window.addEventListener('load',eventWindowLoaded,false);
  12. function eventWindowLoaded(){
  13.     canvasApp();
  14. }
  15. function canvasSupport(){
  16.     return Modernizr.canvas;
  17. }
  18. function canvasApp(){
  19.     if(!canvasSupport()){
  20.         return;
  21.     }else{
  22.         var theCanvas = document.getElementById('canvas')
  23.         var context = theCanvas.getContext("2d")
  24.  
  25.     }
  26.     drawScreen();
  27.     function drawScreen(){
  28.         //水平渐变值必须保持为0
  29.         var gr = context.createLinearGradient(0,0,100,0);
  30.         //添加颜色端点
  31.         gr.addColorStop(0,'rgb(255,0,0)');
  32.         gr.addColorStop(.5,'rgb(0,255,0)');
  33.         gr.addColorStop(1,'rgb(0,0,255)');
  34.         //应用fillStyle生成渐变
  35.         context.strokeStyle = gr;
  36.         context.strokeRect(0,0,100,100);
  37.         context.strokeRect(0,100,50,100);
  38.         context.strokeRect(0,200,200,100);
  39.  
  40.     }
  41. }
  42. </script>
  43. <canvas id="canvas" width="500" height="500">
  44. 你的浏览器无法使用canvas
  45. 小白童鞋；你的支持是我最大的快乐！！
  46. </canvas>
  47. </body>
  48. </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. SSM整合配置(Spring+Spring MVC+Mybatis)

    一.配置准备   通过Maven工程,在eclipse中整合SSM,并在Tomcat服务器上运行 在进行配置前,先理清楚要配置哪些文件,如图,除web.xml外,其余三个配置文件名称均可自定义: 如图 ...

  2. vector读入指定行数但不指定列数的数字

    #include <iostream> #include <vector> #include <cstdio> #include <cstring> # ...

  3. WebShell代码分析溯源(第1题)墨者学院

    一.访问链接 二.下载系统源码后直接放到D盾里扫描,扫到后门文件 三.查看该木马文件 <?php error_reporting(0); $_GET['POST']($_POST['GET']) ...

  4. PHP学习 类型 变量 常数 运算符

    PHP支持下列8种类型 标量类型 scalar type整数 integer浮点数 float double布尔 boolean字符串 string 特殊类型 special typeNULL资源 r ...

  5. MongoDB作为Windows服务来安装 错误1053：服务没有及时响应启动或控制请求

    这个问题我解决了一晚上,用尽了所有百度 博客上的方法,都是失败的 结果重新换了一种安装的方法 视频讲解  非常清楚 https://www.bilibili.com/video/av31240330? ...

  6. Java实验报告（实验二）

    课程:Java程序设计          班级: 1351 姓名:王玮怡                学号:20135116 成绩:             指导教师:娄嘉鹏       实验日期: ...

  7. Linux内核分析第一二章读书笔记

    linux读书笔记(1,2章) 标签(空格分隔): 20135328陈都 第一章 Linux内核简介 Unix的历史 Unix 虽然已经使用了40年,但计算机科学家仍然认为它是现存操作系统中最强大和最 ...

  8. bzip2 以及 tar 压缩/解压缩/.打包等工具软件

    1. bzip2 命令 基础格式: bzip2 [Options] file1 file2 file3 指令选项:(默认功能为压缩) -c //将输出写至标准输出 -d //进行解压操作 -v //输 ...

  9. pgm2

    MRF 笔记 我们先讨论引入 MRF 的必要性.经典的例子就是四个 r.v.s 连成一个正方形的结构的时候,我们没法通过 BN 获得给定对角线两个 r.v.s 而剩下的条件独立(不都是 d-sep), ...

  10. Tomcat源码解析-整体流程介绍

    一.架构 下面谈谈我对Tomcat架构的理解 总体架构: 1.面向组件架构 2.基于JMX 3.事件侦听 1)面向组件架构 tomcat代码看似很庞大,但从结构上看却很清晰和简单,它主要由一堆组件组成 ...