html5 实例渐变
代码实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实例</title>
<script>
window.onload=function() {
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
//渐变的位置
var colorObj=ctx.createLinearGradient(0,0,100,0);
//颜色的变化
colorObj.addColorStop(0,"blue");
colorObj.addColorStop(1,"green");
ctx.fillStyle= colorObj;
ctx.fillRect(0,0,100,100); ctx.putImageData(imgData,0,0);
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>
效果:
2017-09-12 09:51:31
html5 实例渐变的更多相关文章
- 值得 Web 开发人员收藏的20个 HTML5 实例教程
当开始学习如何创建 Web 应用程序或网站的时候,最流行的建议之一就是阅读教程,并付诸实践.也有大量的 Web 开发的书,但光有理论没有实际行动是无用的.现在由于网络的发展,我们有很多的工具可以用于创 ...
- HTML5新特性之CSS+HTML5实例
1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...
- (转)HTML5之渐变
<!DOCTYPE> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta h ...
- html5实例-闪烁的星星
一.绘制五角星 1.1页面结构 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- HTML5颜色渐变3D文字特效
在线演示 本地下载
- HTML5新特性及详解
什么是HTML5:HTML5 是下一代的HTML,将成为 HTML.XHTML 以及 HTML DOM 的新标准. 为 HTML5 建立的一些规则: 新特性应该基于 HTML.CSS.DOM 以及 J ...
- html5 基本内容 摘自W3C
HTML5 教程(摘录自 W3C School) HTML 5 简介(HTML5 是下一代的 HTML) 什么是 HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标 ...
- HTML5 学习笔记 1
1.音频.视频 <!DOCTYPE HTML> <html> <body> <audio controls="controls"> ...
- HTML5 总结-画布-4
HTML5 画布 创建 Canvas 元素 向 HTML5 页面添加 canvas 元素. 规定元素的 id.宽度和高度: <canvas id="myCanvas" wid ...
随机推荐
- linux运维、架构之路-linux用户管理
一. linux系统用户分类 1.分类 ①超级用户:root,UID为0 ②普通用户:UID是500-65535的用户 ③虚拟用户:UID在1-499,一般不能登录,满足文件或服务启动的需要,/sbi ...
- C语言 为什么要引入指针?
https://blog.csdn.net/chengxuyuan997/article/details/81231679 正文 在说为什么引入指针这个问题前先带大家了解一下什么是指针? 指针最为简短 ...
- div 上禁止复制的css实现方法
div { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-se ...
- hdu 5511 Minimum Cut-Cut——分类讨论思想+线段树合并
题目:http://acm.hdu.edu.cn/showproblem.php?pid=5511 题意:割一些边使得无向图变成不连通的,并且恰好割了两条给定生成树上的边.满足非树边两段一定在给定生成 ...
- python之-框架
MVC:Model-View-Controller,中文名“模型-视图-控制器” C——Python处理URL的函数:Controller,Controller负责业务逻辑,比如检查用户名是否存在,取 ...
- redis centos集群搭建和java应用
1. 首先要ssh免密登录 redis集群,3台虚拟机,6个节点,每台机器2个节点一主一从. 192.168.132.154 c0192.168.132.156 c1192.168.132.155 c ...
- 解读:nginx的一个神秘配置worker_cpu_affinity
今天在查看nginx的相关知识的时候发现了一个nginx之前不认识的配置:worker_cpu_affinity. nginx默认是没有开启利用多核cpu的配置的.需要通过增加worker_cpu_a ...
- C#调取接口时报错:服务器提交了协议冲突. Section=ResponseStatusLine
private Dictionary<string, Object> GetLocation(string imei) { #region===代码=== string serviceAd ...
- 解决Sql Server服务远程过程调用失败
方法一:修复Sql Server: 修复过程中若遇到:重新启动计算机失败, 1.按下组合键[Win]+[R],调出运行窗口 2.输入“regedit”,在注册表左侧目录栏中找到如下位置:“HKEY_L ...
- spring-第十七篇之spring AOP基于注解的零配置方式
1.基于注解的零配置方式 Aspect允许使用注解定义切面.切入点和增强处理,spring框架可以识别并根据这些注解来生成AOP代理.spring只是用了和AspectJ 5一样的注解,但并没有使用A ...