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

随机推荐

Java泛型总结---基本用法，类型限定，通配符，类型擦除
一.基本概念和用法在Java语言处于还没有出现泛型的版本时,只能通过Object是所有类型的父类和类型强制转换两个特点的配合来实现类型泛化.例如在哈希表的存取中,JDK1.5之前使用HashMap的 ...
【webpack2】-- 入门与解析
每次学新东西总感觉自己是不是变笨了,看了几个博客,试着试着就跑不下去,无奈只有去看官方文档. webpack是基于node的.先安装最新的node. 1.初始化安装node后,新建一个目录,比如ht ...
javascript好文 --- 深入理解可视区尺寸client
可视区大小可视区大小client又称为可见大小或客户区大小,指的是元素内容及其内边距所占据的空间大小 clientHeight clientHeight属性返回元素节点的可见高度 clientHei ...
【MyEcplise】设置右键快捷菜单的方法
在我们右键新建项目或文件时,有许多的选项我们几乎是不用的,那就没有必要放在右键的快捷菜单中:而有些选项是我们经常会用的,但是右键快捷菜单有没有,我们总是需要选择其它去到弹出的对话框中取选取.这些操作很 ...
将可执行程序的内存空间扩展到3GB（windows）
为了告知操作系统这个应用程序可以支持/3GB方式,我们需要往exe 文件头中添加一个 IMAGE_FILE_LARGE_ADDRESS_AWARE 标志.添加的方式很简单: 在你的系统的 Progra ...
python 使用cx-freeze打包程序
python环境 3.6.5 win7 linux环境同理先尝试了PyInstaller ,打包时一直提示 no module named gtk 而gtk 又依赖pygobj ...
如何给redis设置密码
如何给redis设置密码学习了:https://blog.csdn.net/qq_35357001/article/details/56835919
判断浏览器是否支持flash
虽然flash已经过时了,如腾讯视频一样,有很多网站还来不及或者根本就改不了原来的架构,所以我们需要判断flash视频(默认chrome和Firefox)等浏览器会自动阻止flash加载 , 这与Sa ...
Cookie学习笔记二：Cookie实例
今天说说刚刚学到的两个Cookie的最经典应用:自己主动登录和购物车设置一:自己主动登录须要两个页面:login.jsp与index.jsp,login.jsp用来输出登录信息,index.jsp ...
谈谈Runtime类中的freeMemory,totalMemory,maxMemory几个方法
最近在网上看到一些人讨论到java.lang.Runtime类中的freeMemory(),totalMemory(),maxMemory ()这几个方法的一些问题,很多人感到很疑惑,为什么,在jav ...

html5--5-12 渐变色

html5--5-12 渐变色

学习要点

实例

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

随机推荐

热门专题