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> ...
随机推荐
- uwsgi+django架构程序内部无法获取全局变量
近期开发了一个djangoi程序,用django自带的python manage.py runserver 0.0.0.0:80 运行方式无任何问题,但用django+nginx+uwsg部署运行有时 ...
- DMS专线联通外网测试
配置 CE Ping PE: “本地链接”-->属性-->"Internet 协议版本4(TCP/IPv4)",选择“使用下面的IP”,填写“172.16.10.21” ...
- WebService技术,服务端and客户端JDK-wsimport工具(一)
使用webservice服务,需要了解几个名词:soap 简单对象协议.http+xml . WSDL 先看下代码结构: 服务端代码与客户端代码分别处于两不同的包中 一.服务端内容 服务端: @Web ...
- FFMPEG的基础使用
由于最近要将yuv视频下采样,于是使用ffmpeg快速将yuv视频下降分辨率.在此记录ffmpeg的基础使用方法和所遇到的问题: 下载,可到官网下载:https://www.ffmpeg.org/ . ...
- 论文阅读 | Clustrophile 2: Guided Visual Clustering Analysis
论文地址 论文视频 左侧边栏可以导入数据,或者打开以及前保存的结果.右侧显示了所有的日志,可以轻松回到之前的状态,视图的主区域上半部分是数据,下半部分是聚类视图. INTRODUCTION 数据聚类对 ...
- 一种C#泛型方法在lua中表示的设计
在进行lua方法注册的时候, 大多数解决方案直接否定了泛型方法, 因为在lua侧难以表达出泛型, 以及lua的函数重载问题, 函数重载问题可以通过一些特殊方法解决, 而泛型问题是主要问题, 以Unit ...
- C语言 -- 字符串详解
字符串是一种非常重要的数据类型,但是C语言不存在显式的字符串类型,C语言中的字符串都以字符串常量的形式出现或存储在字符数组中.同时,C 语言提供了一系列库函数来对操作字符串,这些库函数都包含在头文件 ...
- group by 和count的联合使用问题 [转]
group by 和count的联合使用问题 今天写查询语句遇到一个问题,就是用group by进行分组以后,用count统计分组以后的个数, 开始写的语句大体是: select count(m.fb ...
- 云平台项目--学习经验--BootstrapValidate表单验证插件
使用前提,需要加载jquery和bootstrap库.并且引入bootstrapValidator.js和bootstrapValidator.css文件然后建立一个form表单,添加表单控件,表单控 ...
- appium获取Toast内容的方法
做自动化测试的时候,可能需要根据弹出的Toast提示来做下一步判断.这里记录一下获取Toast内容的方法,同时巩固一下显示等待的方法之一WebDriverWait. from selenium.web ...