html5--5-12 渐变色

学习要点

掌握渐变色的绘制方法

渐变色绘制方法

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");

         context.lineWidth=2;

         context.strokeStyle="#00FFFF";

         context.fillStyle="#FFA500";

         context.moveTo(250,250);

         context.arc(250,250,200,Math.PI*7/6,Math.PI*1.5,false);

         context.moveTo(250,250);

         context.arc(250,250,200,Math.PI*11/6,Math.PI*1.5,true);

         context.fill();

         context.beginPath();

         context.fillStyle="#A9A9A0";

         context.moveTo(250,250);

         context.arc(250,250,100,Math.PI*7/6,Math.PI*1.5,false);

         context.moveTo(250,250);

         context.arc(250,250,100,Math.PI*11/6,Math.PI*1.5,true);

         context.fill();

         //绘制文字

         context.beginPath();

         context.font="40px 隶书";

         context.strokeText("纵横",210,260);

         context.beginPath();

         context.fillStyle="#FFA500";

         context.fillText("纵横",210,260);

         //给扇子加字体

         context.beginPath();

         context.fillStyle="#000000";

         context.font="60px 隶书";

         context.fillText("纵",220,100);

         context.beginPath();

         context.strokeStyle="#FF0000";

         context.strokeText("横",220,140);

         //渐变色

         //1、设置渐变色

         var gradient=context.createLinearGradient(50,50,400,230);

         //添加渐变色中的颜色

         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>

 </body>

 </html>

 <!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.createLinearGradient(50,50,400,230);

         //添加渐变色中的颜色

         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.lineWidth=2;

         context.strokeStyle="#00FFFF";

         context.fillStyle=gradient;

         context.moveTo(250,250);

         context.arc(250,250,200,Math.PI*7/6,Math.PI*1.5,false);

         context.moveTo(250,250);

         context.arc(250,250,200,Math.PI*11/6,Math.PI*1.5,true);

         context.fill();

         context.beginPath();

         context.fillStyle="#A9A9A0";

         context.moveTo(250,250);

         context.arc(250,250,100,Math.PI*7/6,Math.PI*1.5,false);

         context.moveTo(250,250);

         context.arc(250,250,100,Math.PI*11/6,Math.PI*1.5,true);

         context.fill();

         //绘制文字

         context.beginPath();

         context.font="40px 隶书";

         context.strokeText("纵横",210,260);

         context.beginPath();

         context.fillStyle="#FFA500";

         context.fillText("纵横",210,260);

         //给扇子加字体

         context.beginPath();

         context.fillStyle="#000000";

         context.font="60px 隶书";

         context.fillText("纵",220,100);

         context.beginPath();

         context.strokeStyle="#FF0000";

         context.strokeText("横",220,140);

         // //渐变色

         // //1、设置渐变色

         // var gradient=context.createLinearGradient(50,50,400,230);

         // //添加渐变色中的颜色

         // 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>

 </body>

 </html>

html5--5-12 渐变色的更多相关文章

30个HTML5学习资源
早在几个星期前,Adobe就发布了Dreamweaver CS5 HTML5 Pack的预览版下载.众所周知,HTML5在互联网领域掀起了一场大论战,并让Adobe的日子很难熬.HTML5致力于为前端 ...
HTML5学习参考资料整理
给大家推荐一下学习研究HTML5必备的一些个网站,更加有利于大家对HTML5的学些和研究.如果各位童鞋还有更多的,欢迎投递资源给我们,也可以支持我们,让我们利用大家的力量收集更多的HTML5学习资料 ...
My latest news（--2016.12.31）
2016.12.31 前一天晚上看 “纪实新闻” ,白天看视频,晚上刷题,看电影<湄公河行动> 2016.12.30 18:36 昨天上午考完了本学期的最后一门课程,下午乒乓+值班,今天 ...
Html5学习导航
给大家推荐一下学习研究HTML5必备的一些个网站,更加有利于大家对HTML5的学些和研究.如果各位童鞋还有更多的,欢迎投递资源给我们,也可以支持我们,让我们利用大家的力量收集更多的HTML5学习资料, ...
【转】15个超炫的HTML5效果
英文原文:http://www.hongkiat.com/blog/15-html5-experiments/ 翻译:iteye 乔布斯没有给Flash任何机会,微软新推出的Windows 8 ...
[web建站] 极客WEB大前端专家级开发工程师培训视频教程
极客WEB大前端专家级开发工程师培训视频教程教程下载地址: http://www.fu83.cn/thread-355-1-1.html 课程目录:1.走进前端工程师的世界HTML51.HTML5 ...
php大力力 [046节] 兄弟连高洛峰 PHP教程 2015年[最新最新最新最新最新]
兄弟连高洛峰老师新版PHP视频教程列表[每日更新] http://bbs.lampbrother.net/read-htm-tid-160506.html HTML部分1.[2015]兄弟连高洛峰 H ...
jquery mobile切换页面的几种方法
jquery mobile切换页面的几种方法 - 不厚道青蛙之焦油潭 - 博客频道 - CSDN.NET jquery mobile切换页面的几种方法分类: phonegap html5 2012- ...
《Javascript_Dom 编程艺术》（第2版）读书笔记
第1章 Javascript 简史 Dom : 平稳退化.渐进增强,以用户为中心的设计第2章 Javascript 语法 1.程序设计语言分为:解释性(javascript)和编译型(java,C+ ...
HTML/CSS开发规范指南
参见文档:https://github.com/doyoe/html-css-guide 1.文档目录结构 |-- 项目名 |-- src 开发环境 |-- html 静态页面模板目录 |-- bgi ...

随机推荐

c#中开发ActiveX的学习笔记【转】
http://www.cnblogs.com/yjmyzz/archive/2009/12/14/1623396.html 1.为什么要用ActiveX? 网页本身的功能是有限的,要想实现一些网页本身 ...
es6 对象浅拷贝的2种方法
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
Odoo multiprocessing
Odoo 在非 windows 系统下, 支持并行处理,开启 workers 配置项即可. odoo有以下配置项跟并行处理有关配置项帮助信息解说 limit_memor ...
Linux基础（3）- 正文处理命令及tar命令、vi编辑器、硬盘分区、格式化及文件系统的管理和软连接、硬连接
一.正文处理命令及tar命令 1) 将用户信息数据库文件和组信息数据库文件纵向合并为一个文件1.txt(覆盖) 2) 将用户信息数据库文件和用户密码数据库文件纵向合并为一个文件2.txt(追加) ...
C# SQL 整表插入
说明: (1)表A的一部分数据插入到表B (2)DataAccess 类,是放在DAL层下的底层类; da.StrConnection 写在DataAccess类中; //整表插入方法 private ...
vue入门-常用指令操作
指令:v-xx组成的特殊指令,如果一个标签中有指令会默认替换原有的书 v-model:实现数据和视图的双向绑定 v-text:在元素中插入值 v-html:在元素中插入标签或者插入文本 v-if:根据 ...
qt的下载链接
http://download.qt.io/archive/qt/5.8/5.8.0/ http://download.qt.io/archive/qt/ http://download.qt.io ...
eclipse如何查问题？
问题:从SVN上拉了一个项目,莫名奇妙就报错?看着就很纠结解决之道:在Window下拉菜单show View 找到Problems 就可以查到具体的原因,我的这个是需要添加一个tomcat服务器
sublime 实用快捷键
Command+Enter 在下一行插入新行.举个栗子:即使光标不在行尾,也能快速向下插入一行. Command+Shift+Enter 在上一行插入新行.举个栗子:即使光标不在行首,也能快速向上插入 ...
React机制浅析
在写React代码时,避免不了提前想想页面的结构,当然这也属于HTML布局了,比如哪些组件里需要包含哪些组件.遂突发奇想,如果试着把子组件的render内容替换原组件,会是个啥? 比如拿 https: ...

html5--5-12 渐变色

html5--5-12 渐变色

学习要点

实例

html5--5-12 渐变色的更多相关文章

随机推荐

热门专题