html5 canvas 垂直渐变描边
<!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 垂直渐变描边的更多相关文章
- html5 canvas 水平渐变描边
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- HTML5 Canvas 填充与描边(Fill And Stroke)
HTML5 Canvas 填充与描边(Fill And Stroke) 演示HTML5 Canvas Fill 与Stroke文字效果,基于Canvas如何实 现纹理填充与描边. 一:颜色填充与描边 ...
- html5 canvas 填充渐变形状
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html5 canvas 径向渐变2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html5 canvas 径向渐变
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html5 canvas 对角线渐变
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- HTML5 Canvas ( 径向渐变, 升级版的星空 ) fillStyle, createRadialGradient
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas ( 线性渐变, 升级版的星空 ) fillStyle, createLinearGradient, addColorStop
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- html5 canvas图片渐变
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- GitHub 新手教程 四,Git GUI 新手教程(1),OpenSSH Public Key
1,从开始菜单 启动 Git GUI,或者运行: D:\soft\Git\cmd\git-gui.exe(D:\soft\Git 为您的 GitHub 安装文件夹) 2,获取 SSH 密钥: 3,点击 ...
- springboot 前后端分离开发 从零到整(一、环境的搭建)
第一次写文章,有什么错误地方请大家指正,也请大家见谅. 这次为大家分享我做毕业设计的一个过程,之前没有接触过springboot,一直做的都是Javaweb和前端,做了几个前后端分离的项目.现在听说s ...
- Redis源码阅读(二)高可用设计——复制
Redis源码阅读(二)高可用设计-复制 复制的概念:Redis的复制简单理解就是一个Redis服务器从另一台Redis服务器复制所有的Redis数据库数据,能保持两台Redis服务器的数据库数据一致 ...
- 一份超全超详细的 ADB 用法大全
http://blog.csdn.net/u010375364/article/details/52344120
- Linux内核分析——第五周学习笔记
第五周 扒开系统调用的“三层皮”(下) 一.知识点总结 (一)给MenuOS增加time和time-asm命令 在实验楼中,首先 强制删除menu (rm menu -rf) 重新克隆一个新版本的me ...
- Team Work Ⅱ
Regal-Lighting团队设计 分工思考 本次大作业我的分工定位是:Unit及子类,主要设计实现建筑类的功能. 首先王者光耀这款游戏所需要的建筑分为三类: 1.防御塔:有一定的血量,血量为0时破 ...
- CMS垃圾收集器与G1收集器
1.CMS收集器 CMS收集器是一种以获取最短回收停顿时间为目标的收集器.基于“标记-清除”算法实现,它的运作过程如下: 1)初始标记 2)并发标记 3)重新标记 4)并发清除 初始标记.从新标记这两 ...
- android 命令行安装apk
有两种方式可以在android模拟器或真机上使用命令行安装apk 一种是使用adb install命令,网上通常是这种方式 另一种是通过android提供的命令,pm install. 需要先进入an ...
- 600字让你读懂Git
设想你现在位于 alpha/ 目录下,这里有一个文本文件 number.txt,里面的内容只有一个词:“first”. 现在执行 git init 将这个 alpha 文件夹初始化为 Git 仓库. ...
- 扩展名为DBF的是什么文件啊?
扩展名为DBF的文件: .dbf文件是dBase和FoxPro所使用的数据库格式,在没有这两种软件的情况下,可以使用Excel打开文件.在Excel的“打开”文件的对话框中,选择文件类型为“dBase ...