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. Eval is evil ('Eval是魔鬼') --- eval()函数

    Eval is evil ('Eval是魔鬼') eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码.语法:eval(string): eval的使用场合是什么呢?有时候我 ...

  2. ant的安装和配置

    1.从官网下载bin源码 http://ant.apache.org/bindownload.cgi#Verify%20Releases 校验源码的完整性 2.直接把解压,然后把文件放入/usr/lo ...

  3. android清除缓存为什么总是存在12k？

    转载请注明出处:http://blog.csdn.net/droyon/article/details/41116529 android手机在4.2之后.清除缓存总是会残留12k的大小.预计强迫症患者 ...

  4. ※版本管理※=>☆SVN工具=>※解决地域麻烦※№→搭建自己的网络SVN (SourceForge 免费) [转]

    源文 http://blog.csdn.net/xiaoting451292510/article/details/8562570 分类: 版本管理 2013-02-01 14:44 26057人阅读 ...

  5. vue2.0 + vux （四）Home页

    1.综合页(首页) Home.vue <!-- 首页 --> <template> <div> <!-- 顶部 标题栏 --> <app-head ...

  6. 什么是猴子补丁(monkey patch)

    monkey patch指的是在执行时动态替换,通常是在startup的时候. 用过gevent就会知道,会在最开头的地方gevent.monkey.patch_all();把标准库中的thread/ ...

  7. 照猫画虎学gnuplot之折线图

    本节重点:怎样利用已知数据来画折线图. 首先说明:gunplot文件的后缀名为*.plt.本节讲述怎样利用已知数据来画折线图,顾名思义必定涉及到两个文件:一个是须要的数据文件,即*.dat文件.还有一 ...

  8. AVL平衡树的插入例程

    /* **AVL平衡树插入例程 **2014-5-30 11:44:50 */ avlTree insert(elementType X, avlTree T){ if(T == NULL){ T = ...

  9. linux 信号屏蔽

    <span style="font-size:18px;">#include <sys/types.h> #include <unistd.h> ...

  10. webstorm 设置IP 访问 手机测试效果

    http://www.cnblogs.com/gulei/p/5126383.html 前端开发中,经常需要将做好的页面给其他同事预览或手机测试,之前一直用的第三方本地服务器usbwebserver, ...