html5--5-13 渐变色
html5--5-13 渐变色
学习要点
- 掌握渐变色的绘制方法
渐变色绘制方法
- createLinearGradient() 创建线性渐变
- createLinearGradient(x1,y1,x2,y2)---颜色渐变的起始坐标和终点坐标
- addColorStop(位置,"颜色值")---0表示起点...插入点...1表示终点,配置颜色停止点
- createRadialGradient(x1,y1,r1,x2,y2,r2,) 创建放射状/环形的渐变
- ....
文字的绘制方法
- strokeText("文字",x,y,maxWith) 绘制(描边)空心文字
- fillText("文字",x,y,maxWith) 绘制实心
- 字体样式:font="大小 字体 ..."
矩形的绘制方法
- rect(x,y,w,h)创建一个矩形
- strokeRect(x,y,w,hx,y,w,h) 绘制矩形(无填充)
- fillRect(x,y,w,h) 绘制"被填充"的矩形
- stroke() 绘制已定义的路径
- fill()绘制一个实心的(带填充的图形)
Canvas的路径方法
- moveTo() 定义绘制路径的起点(在直线中就是定义直线的起点)
- lineTo() 添加一个新点,(在我们的直线案例中就是定义直线的终点,但是后边继续绘制的话,它就变成中间点)
- stroke() 绘制已定义的路径
- fill()绘制一个实心的(带填充的图形)
- beginPath() 用来创建新的路径
- closePath() 从当前点回到起始点的来封闭路径
- arc(x,y,r,开始角度,结束角度,true/false) :创建圆弧/曲线(用于创建圆形或部分圆)
绘制直线段流程:
- 在HTML5文档中添加canvas元素,并且设置的宽高和ID
- 在canvas元素中添加提示语句,让不支持canvas的浏览器能够显示友好的提示语句
- 添加script元素
- 获取画布/设置绘图绘图环境:此为固定语句,暂时记住、了解即可,后续课程还会继续讲解
- 指定线宽:lineWidth= 数值
- 指定颜色:strokeStyle=颜色值(只适用用轮廓,线段等,填充色用:fillStyle=颜色值
- 设定起点:moveTo(x坐标,y坐标)
- 设定终点:lineTo(x坐标,y坐标)
- 开始绘制:stroke()
绘制矩形流程:
- 在HTML5文档中添加canvas元素,并且设置的宽高和ID
- 在canvas元素中添加提示语句,让不支持canvas的浏览器能够显示友好的提示语句
- 添加script元素
- 获取画布/设置绘图绘图环境:此为固定语句,暂时记住、了解即可,后续课程还会继续讲解
- 绘制空心矩形
- 指定线宽:lineWidth= 数值
- 指定轮廓颜色:strokeStyle=颜色值(只适用用轮廓,线段等,填充色用:fillStyle=颜色值
- 设定矩形的基本参数:strokeRect(x,y;width,height)
- 绘制填充矩形
- 指定填充颜色:fillStyle=颜色值(只适用用轮廓,线段等,填充色用:fillStyle=颜色值
- 设定矩形的基本参数:fillRect(x,y;width,height)
绘制圆
- 在HTML5文档中添加canvas元素,并且设置的宽高和ID
- 在canvas元素中添加提示语句
- 添加script元素
- 获取画布/设置绘图绘图环境
- 指定线宽:lineWidth= 数值
- 指定颜色:fill/strokeStyle=颜色值(只适用用轮廓,线段等,填充色用:fillStyle=颜色值
- 设定圆的基本参数:
- 圆心的坐标:x,y
- 圆的半径:数值
- 起始弧度和终止弧度:角度值1,角度值2
- 绘制方向:true(逆时针)/false(顺时针)
- 开始绘制:stroke()/fill()
实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head> <body>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
canvas{background: #A9A9A0}
</style>
</head>
<body>
<canvas id="mycanvas" width="500px" height="300">
您的浏览器暂不支持HTML5的canvas元素!!
</canvas>
<script type="text/javascript">
//定义变量获取画布DOM
var canvas=document.getElementById("mycanvas");
//设置绘画环境为2d
var context=canvas.getContext("2d"); //渐变色
//1、设置渐变色
var gradient=context.createRadialGradient(50,150,5,470,150,100);
//添加渐变色中的颜色
gradient.addColorStop(0,"#000000");
gradient.addColorStop(0.2,"#FF0000");
gradient.addColorStop(0.4,"#00FF00");
gradient.addColorStop(0.6,"#0000FF");
gradient.addColorStop(0.8,"#FF00FF");
gradient.addColorStop(1,"#FFFFFF");
//2、用设置好的渐变色来填充我们的日常图形就好
context.fillStyle=gradient;
context.fillRect(50,50,400,230); //给扇子加渐变色
</script> <canvas id="mycanvas2" width="500px" height="300" >
您的浏览器暂不支持HTML5的canvas元素!!
</canvas>
<script type="text/javascript">
//定义变量获取画布DOM
var canvas=document.getElementById("mycanvas2");
//设置绘画环境为2d
var context=canvas.getContext("2d"); //渐变色
//1、设置渐变色
var gradient=context.createRadialGradient(250,150,10,250,150,100);
//添加渐变色中的颜色
gradient.addColorStop(0,"#000000");
gradient.addColorStop(0.2,"#FF0000");
gradient.addColorStop(0.4,"#00FF00");
gradient.addColorStop(0.6,"#0000FF");
gradient.addColorStop(0.8,"#FF00FF");
gradient.addColorStop(1,"#FFFFFF");
//2、用设置好的渐变色来填充我们的日常图形就好
context.fillStyle=gradient;
context.arc(250,150,100,0,Math.PI*2);
context.fill();
//给扇子加渐变色
</script>
</body>
</html>
html5--5-13 渐变色的更多相关文章
- HTML学习笔记
HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...
- JS复习--更新结束
js复习-01---03 一 JS简介 1,文档对象模型 2,浏览器对象模型 二 在HTML中使用JS 1,在html中使用<script></script>标签 2,引入外部 ...
- 使用ASP.NET 构建 Web 应用程序快速入门-8小时的免费培训视频
- Scott Hanselman的中文博客[转载] [原文发表地址] Building Web Apps with ASP.NET Jump Start - 8 Hours of FREE Trai ...
- 程序员需要的各种PDF格式电子书【附网盘免费下载资源地址】
程序员需要的各种PDF格式电子书[附网盘免费下载资源地址] 各位,请妥善保存,后期还会有更多更新,如果你有不同的书籍资源或者这里没有你要找的书籍,也可以直接留言,后期我们会继续更新~ Java & ...
- Head First HTML与CSS(第2版)PDF高清完整版免费下载|百度云盘
百度云盘:Head First HTML与CSS(第2版)PDF高清完整版免费下载 提取码:i8q4 内容简介 是不是已经厌倦了那些深奥的HTML书?你可能在抱怨,只有成为专家之后才能读懂那些书.那么 ...
- HTML5的渐变色 渐变的两种类型 createLinearGradient 和createRadialGradient
今天又再看了html5的颜色渐变API,发现没有第一次看那么复杂. 不过我对这个颜色渐变存在着一个疑惑就是两种色带之间,那段是属于两种颜色混合的,有点模糊. 比如从红色变成黄色,在红与黄之间的那个地方 ...
- html5 canvas绘制环形进度条,环形渐变色仪表图
html5 canvas绘制环形进度条,环形渐变色仪表图 在绘制圆环前,我们需要知道canvas arc() 方 ...
- CSS3秘笈第三版涵盖HTML5学习笔记13~17章
第13章,构建基于浮动的布局 使用的是float(浮动)属性 注:float:none值将取消所有浮动,通常只用来取消元素中已经应用的浮动. 切记:不需要给正文的div设计宽度,即使设计成固定宽度也不 ...
- 小强的HTML5移动开发之路(13)——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
- 第一篇 HTML5打包APP之VMware15安装MAC(MAC OS 10.13)(OS X 10.14)原版可升级最新可解锁macOS Unlocker3.0(OS X 10.13)
1.1.2安装环境: 1.1.3所需资源: 1.1.4 Unlocker 3.0解锁 1.1.5 配置环境 1.1.6开始安装 1.1.7开启虚拟机进入MAC安装界面 1.1.8 macOS 10.1 ...
随机推荐
- java多线程04----------final和static
final和static关键字 final关键字 1.final关键字在单线程中的特点: 1)final修饰的静态成员:必须在进行显示初始化或静态代码块赋值,并且仅能赋值一次. 2)final修饰的类 ...
- GridControl 校验输入单元格格式 z
// 对应的校验行事件,ValidateRow private void gv_FeeItem_ValidateRow(object sender, DevExpress.XtraGrid.Views ...
- 深入理解Activity启动流程(二)–Activity启动相关类的类图
本文原创作者:Cloud Chou. 欢迎转载,请注明出处和本文链接 本系列博客将详细阐述Activity的启动流程,这些博客基于Cm 10.1源码研究. 在介绍Activity的详细启动流程之前,先 ...
- php自己编译安装后,再给这个编译安装的php版本添加拓展模块的处理办法。
原文: https://www.cnblogs.com/zongyl/p/5924627.html 说明,给编译安装之后的php 添加pgsql 拓展成功. --------------------- ...
- 转: Android开发的网络抓包
方法就是在android机器上面安装tcpdump,然后通过-w参数把抓包记录到本地,再把抓到的.cap文件导到pc上面用wireshark来分析.这里步骤非常多,在和后台联调的时候,这个效率是非常低 ...
- C# 操作摄像头
如有雷同,不胜荣幸,若转载,请注明 这个是大众普通方法,鉴于有网友和朋友问相同的问题.在这里将我的拙劣的代码关键部分贴出来.以便帮助很多其它的朋友们,不足之处甚多,我能够学习,交流,请教阁下 废话到此 ...
- 网站的根目录下有一个文件robots.txt ,它是啥?
我相信很多人有过这个疑问,这个robots文件是干嘛的? 我想问,各位搜索淘宝时,是否发现(禁止爬虫抓取提供快页) 关于详细语法,请看:http://zhidao.baidu.com/question ...
- OpenCV入门笔记(一) Linux下的安装
关于OpenCV,有中文的官方站点.里面翻译了官网的教程和API等.中文官方Tutorials见这里:[Tutorials] 一.Ubuntu下的安装 能够选择直接从库里安装,或者手动编译安装,请參考 ...
- Linux 学习之虚拟机下的网络连接
参考资料: http://wenku.baidu.com/link?url=_55RWvvBKQDoZjQSo-HQ3TdmLIzX1zkA_g1znCw0IXkwvxbxMiA3KfpyaL-lhv ...
- POJ 2309 BST
BST Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 8565 Accepted: 5202 Description C ...