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/ ...
随机推荐
- python中类中属性和方法的具体定义方法和使用
1. Python中类中特性分成属性和方法 属性和方法都分为私有和公有的,私有的只可以在本类中使用外部是无法访问的 2. 定义属性(成员变量)的语法格式(公有属性/私有属性) class 类名: de ...
- Python_汇总生成统计报表
import xlrd import xlwt from xlutils.copy import copy objWb = xlrd.open_workbook(r'C:\Users\IBM\Desk ...
- c语言数字图像处理（三）：仿射变换
仿射变换及坐标变换公式 几何变换改进图像中像素间的空间关系.这些变换通常称为橡皮模变换,因为它们可看成是在一块橡皮模上印刷一幅图像,然后根据预定的一组规则拉伸该薄膜.在数字图像处理中,几何变换由两个基 ...
- 在windows10上搭建caffe
caffe环境的搭建一直是让我最头疼的,最近在Windows10上成功搭建了caffe,在此对搭建过程进行记录. 安装主要是按照caffe github上的安装说明进行的,caffe的github主页 ...
- Linux第三周学习总结——构造一个简单的Linux系统MenuOS
第三周学习总结--构造一个简单的Linux系统MenuOS 作者:刘浩晨 [原创作品转载请注明出处] <Linux内核分析>MOOC课程http://mooc.study.163.com/ ...
- 《Linux内核分析》第四周：扒开系统调用的三层皮
杨舒雯 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 " 一. 用户 ...
- 软件工程实践-git的使用
² Github使用心得 其实以前就注册过一个github账号,不过那时只不过是因为在网上看到这个挺对于程序员有着重大作用就顺手去弄了,从未使用过,直到这次软工实践需要我才从新回想起来. 之前的几篇随 ...
- 3D舞台实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- [windows]转帖 windows 版本的含义
1.N是None的意思,由于欧洲反垄断法不让系统捆绑浏览器ie和播放器.LTSB全称为Long Term Support Branch,意思为长期支持分支,是给Windows 10企业用户的一个更新选 ...
- [转帖]ESXi 网卡绑定 增加吞吐量的方法
VMware ESX 5.0 网卡负载均衡配置3种方法 http://blog.chinaunix.net/uid-186064-id-3984942.html (1) 基于端口的负载均衡 (Rout ...