html5--5-13 渐变色

学习要点

    掌握渐变色的绘制方法

渐变色绘制方法

    1. createLinearGradient() 创建线性渐变
      • createLinearGradient(x1,y1,x2,y2)---颜色渐变的起始坐标和终点坐标
      • addColorStop(位置,"颜色值")---0表示起点...插入点...1表示终点，配置颜色停止点
    2. createRadialGradient(x1,y1,r1,x2,y2,r2,) 创建放射状/环形的渐变
    3. ....

文字的绘制方法

    1. strokeText("文字"，x,y,maxWith) 绘制（描边）空心文字
    2. fillText("文字"，x,y,maxWith) 绘制实心
    3. 字体样式：font="大小 字体 ..."

矩形的绘制方法

    1. rect(x,y,w,h)创建一个矩形
    2. strokeRect(x,y,w,hx,y,w,h) 绘制矩形（无填充）
    3. fillRect(x,y,w,h) 绘制"被填充"的矩形
    4. stroke() 绘制已定义的路径
    5. fill()绘制一个实心的（带填充的图形）

Canvas的路径方法

    1. moveTo() 定义绘制路径的起点(在直线中就是定义直线的起点)
    2. lineTo() 添加一个新点，(在我们的直线案例中就是定义直线的终点，但是后边继续绘制的话，它就变成中间点)
    3. stroke() 绘制已定义的路径
    4. fill()绘制一个实心的（带填充的图形）
    5. beginPath() 用来创建新的路径
    6. closePath() 从当前点回到起始点的来封闭路径
    7. arc(x,y,r,开始角度，结束角度，true/false) ：创建圆弧/曲线（用于创建圆形或部分圆）

绘制直线段流程:

    1. 在HTML5文档中添加canvas元素，并且设置的宽高和ID
    2. 在canvas元素中添加提示语句，让不支持canvas的浏览器能够显示友好的提示语句
    3. 添加script元素
    4. 获取画布/设置绘图绘图环境：此为固定语句，暂时记住、了解即可，后续课程还会继续讲解
      1. 指定线宽:lineWidth= 数值
      2. 指定颜色：strokeStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
    5. 设定起点：moveTo(x坐标,y坐标)
    6. 设定终点：lineTo(x坐标,y坐标)
    7. 开始绘制：stroke()

绘制矩形流程：

    1. 在HTML5文档中添加canvas元素，并且设置的宽高和ID
    2. 在canvas元素中添加提示语句，让不支持canvas的浏览器能够显示友好的提示语句
    3. 添加script元素
    4. 获取画布/设置绘图绘图环境：此为固定语句，暂时记住、了解即可，后续课程还会继续讲解
      • 绘制空心矩形
        1. 指定线宽:lineWidth= 数值
        2. 指定轮廓颜色：strokeStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
        3. 设定矩形的基本参数：strokeRect(x,y;width,height)
      • 绘制填充矩形
        1. 指定填充颜色：fillStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
        2. 设定矩形的基本参数：fillRect(x,y;width,height)

绘制圆

  1. 在HTML5文档中添加canvas元素，并且设置的宽高和ID
  2. 在canvas元素中添加提示语句
  3. 添加script元素
  4. 获取画布/设置绘图绘图环境
  5. 指定线宽:lineWidth= 数值
  6. 指定颜色：fill/strokeStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
  7. 设定圆的基本参数：
    • 圆心的坐标:x,y
    • 圆的半径：数值
    • 起始弧度和终止弧度：角度值1，角度值2
    • 绘制方向：true（逆时针）/false（顺时针）
  8. 开始绘制：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 渐变色的更多相关文章

  1. HTML学习笔记

    HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...

  2. JS复习--更新结束

    js复习-01---03 一 JS简介 1,文档对象模型 2,浏览器对象模型 二 在HTML中使用JS 1,在html中使用<script></script>标签 2,引入外部 ...

  3. 使用ASP.NET 构建 Web 应用程序快速入门-8小时的免费培训视频

    - Scott Hanselman的中文博客[转载] [原文发表地址] Building Web Apps with ASP.NET Jump Start - 8 Hours of FREE Trai ...

  4. 程序员需要的各种PDF格式电子书【附网盘免费下载资源地址】

    程序员需要的各种PDF格式电子书[附网盘免费下载资源地址]   各位,请妥善保存,后期还会有更多更新,如果你有不同的书籍资源或者这里没有你要找的书籍,也可以直接留言,后期我们会继续更新~ Java & ...

  5. Head First HTML与CSS（第2版）PDF高清完整版免费下载|百度云盘

    百度云盘:Head First HTML与CSS(第2版)PDF高清完整版免费下载 提取码:i8q4 内容简介 是不是已经厌倦了那些深奥的HTML书?你可能在抱怨,只有成为专家之后才能读懂那些书.那么 ...

  6. HTML5的渐变色 渐变的两种类型 createLinearGradient 和createRadialGradient

    今天又再看了html5的颜色渐变API,发现没有第一次看那么复杂. 不过我对这个颜色渐变存在着一个疑惑就是两种色带之间,那段是属于两种颜色混合的,有点模糊. 比如从红色变成黄色,在红与黄之间的那个地方 ...

  7. html5 canvas绘制环形进度条，环形渐变色仪表图

    html5 canvas绘制环形进度条,环形渐变色仪表图                                             在绘制圆环前,我们需要知道canvas arc() 方 ...

  8. CSS3秘笈第三版涵盖HTML5学习笔记13~17章

    第13章,构建基于浮动的布局 使用的是float(浮动)属性 注:float:none值将取消所有浮动,通常只用来取消元素中已经应用的浮动. 切记:不需要给正文的div设计宽度,即使设计成固定宽度也不 ...

  9. 小强的HTML5移动开发之路（13）——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

  10. 第一篇 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 ...

随机推荐

  1. man

    Description n间房子高度不同,Man 要从最矮的房子按照高度顺序跳到最高的房子,你知道房子的顺序,以及Man一次最远可以跳多远,相邻的房子至少有1的距离,房子的宽不计,现在由你安排相邻房子 ...

  2. 手机微硬盘读取速度>50MB/s eMMC技术浅析

    转载:http://mobile.zol.com.cn/296/2968659_all.html#p2968659 手机微硬盘读取速度>50MB/s 在开始今天的话题之前,请大家随笔者一起时光倒 ...

  3. Go -- etcd详解(转)

    CoreOS是一个基于Docker的轻量级容器化Linux发行版,专为大型数据中心而设计,旨在通过轻量的系统架构和灵活的应用程序部署能力简化数据中心的维护成本和复杂度.CoreOS作为Docker生态 ...

  4. Win7下Nginx的安装与配置

    1.  下载nginx1.9.9版本:(版本随时间而变,下载最新即可) http://nginx.org/download/nginx-1.9.9.zip 2. 解压软件到对应位置,并重命名文件夹为n ...

  5. UNIX&Linux发展图谱

    来自为知笔记(Wiz)

  6. 谈一次Linux的木马攻击数据爆满造成的Mysql无法启动

    起初以为是mysql它们之间的扩展没有开启! 后来发现,木马的确使它初始化了,最开始没有用图形化界面 而后,修改并且开启所有pdo扩展 VIM基本操作(除了插入,其它的命令前提是按ESC): 插入: ...

  7. sql导入数据库

    有问题可以尝试加上这句 DROP TABLE IF EXISTS `t_saler_login_log`;

  8. js逻辑非同时两次使用 !!null

    今天遇到了“!!null”的写法,百度没有找到直接的解释,翻书在<javascript高级设计>P44找到了相应的解释: 同时使用两个逻辑非操作符,实际上就会模拟Boolean()转型函数 ...

  9. ffmpeg 跟我学 视频教程

    最近一段时间找时间录制了一些Ffmpeg视频教程,还有录制完毕,会持续更新,内容会包含Ffmeg保存文件,网络流转发, 编码,解码,播放器制作,以及服务端搭建等等,适合初学者,有需要的朋友的可以关注: ...

  10. Jenkins系列之-—06 Ant构建

    一.Ant 简介&构建环境 Apache Ant 是由 Java 语言开发的工具 构建ant环境: 1). 安装jdk,设置JAVA_HOME ,PATH ,CLASS_PATH 2). 下载 ...