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,100,0);
//添加颜色端点
gr.addColorStop(0,'rgb(255,0,0)');
gr.addColorStop(.5,'rgb(0,255,0)');
gr.addColorStop(1,'rgb(0,0,255)');
//应用fillStyle生成渐变
context.fillStyle = 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.fill();
//context.fill();将当前的fillStyle填充到形状中
context.closePath(); }
}
$(document).ready(function(e) { }); </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绘制简单形状
使用canvas来进行绘画,它像很多其他dom对象一样,有很多属性和方法,操作这些方法,实现绘画 获取canvas对象,调用document.getElementById()方法 调用canvas对象 ...
- HTML5 canvas createRadialGradient()放射状/圆形渐变
定义和用法 createLinearGradient() 方法创建放射状/圆形渐变对象. 渐变可用于填充矩形.圆形.线条.文本等等. 提示:请使用该对象作为 strokeStyle 或 fillSty ...
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
- html5 Canvas API
详细内容请点击 1.HTML Canvas API有两方面优势可以弥补:首先,不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好:其次,在其他编程语言现有的优秀二维绘图API的基础上实现C ...
- html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- 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 水平渐变描边
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Azure SQL Database Active Geo-Replication 简介
对于数据库的维护来说,备份工作可谓是重中之重.MS Azure 当然也提供了很完善的数据库备份功能.但是在动手创建备份计划前请思考一下备份工作的真实目的.当然首先要保证数据的安全,一般来说定时创建数据 ...
- python图像处理 模式转化简单总结
图像处理库PIL有九种不同模式:1,L,P,RGB,RGBA,CMYK,YCbCr,I,F 1.模式“1” 模式“1”为二值图像,非黑即白.但是它每个像素用8个bit表示,0表示黑,255表示白. 2 ...
- 华为笔试——C++字符串四则运算的实现
题目:字符串四则运算的实现 有字符串表示的一个四则运算表达式,要求计算出该表达式的正确数值.四则运算即:加减乘除"+-*/",另外该表达式中的数字只能是1位(数值范围0~9),运算 ...
- PHPMyWind5.4存储XSS(CVE-2017-12984)
0x0 环境 操作机:xp 192.168.110.128 目标:win2003 192.168.110.133 目标cms:PHPMyWind5.4 0x11 漏洞介绍 允许恶意访问者在客 ...
- PAT甲题题解-1024. Palindromic Number (25)-大数运算
大数据加法给一个数num和最大迭代数k每次num=num+num的倒序,判断此时的num是否是回文数字,是则输出此时的数字和迭代次数如果k次结束还没找到回文数字,输出此时的数字和k 如果num一开始是 ...
- 2013 C#单元测试
首先安装Unit Test Generator. 点击拓展和更新——>联机搜索Unit Test Generator 新建项目 新建一个测试类 add函数 选定test 类名 ——>右键 ...
- 初学Hadoop之单机模式环境搭建
本文仅作为学习笔记,供大家初学Hadoop时学习参考.初学Hadoop,欢迎有经验的朋友进行指导与交流! 1.安装CentOS7 准备 CentOS系统镜像CentOS-7.0-1406-x86_64 ...
- DHCP分配固定IP
https://www.cnblogs.com/liu1026/p/9829337.html 按照上面的操作实验好后在DHCP服务端的配置文件中加入
- 『编程题全队』alpha阶段项目复审
小组的名字和链接 优点 缺点,bug 报告 最终名次 Gakki赛高 (1)支持注册账号和账号管理(2) 支持自动登录,提供便捷性(3)题目不重复且题目答案准确(4)支持排行榜统计功能(5)自己设计算 ...
- Js单元测试工具 以及 粗浅的对我的快乐运算进行测试
1. Karma的介绍 Karma是Testacular的新名字,在2012年google开源了Testacular,2013年Testacular改名为Karma.Karma是一个让人感到非常神秘的 ...