html5--5-15 绘制阴影

实例

  1.  <!doctype html>
  2.  <html>
  3.  <head>
  4.  <meta charset="utf-8">
  5.  <title>无标题文档</title>
  6.  </head>
  7.  
  8.  <body>
  9.  </body>
  10.  </html><!DOCTYPE html>
  11.  <html lang="en">
  12.  <head>
  13.      <meta charset="UTF-8">
  14.      <title>Document</title>
  15.      <style type="text/css">
  16.          canvas{background: #A9A9A0}
  17.      </style>
  18.  </head>
  19.  <body>
  20.      <canvas id="mycanvas" width="800px" height="600">
  21.          您的浏览器暂不支持HTML5的canvas元素！！
  22.      </canvas>
  23.      <script type="text/javascript">
  24.          //定义变量获取画布DOM
  25.          var canvas=document.getElementById("mycanvas");
  26.          //设置绘画环境为2d
  27.          var context=canvas.getContext("2d");
  28.          context.shadowOffsetX=3;
  29.          context.shadowOffsetY=4;
  30.          context.shadowBlur=5;
  31.          context.shadowColor="#DADA00"
  32.          context.fillStyle="#FF0000";
  33.          context.font="60px 隶书";
  34.          context.fillText("要来一句V587又很Q的话^_^",50,100);
  35.          context.fillText("前方高能：",20,200);
  36.          context.fillText("阴影也可用于图形！！",100,300);
  37.          context.beginPath();
  38.          context.lineWidth=5;
  39.          context.strokeStyle="#FF00FF";
  40.          context.strokeRect(10,40,770,300);
  41.      </script>
  42.  
  43.  </body>
  44.  </html>

学习要点

    掌握绘制阴影的方法

绘制阴影的方法

    1. shadowOffsetX 设置阴影的水平偏移距离
    2. shadowOffsetY 设置阴影垂直偏移距离
    3. shadowBlur 设置阴影的模糊系数
    4. shadowColor 设置阴影的颜色

渐变色绘制方法

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

渐变色绘制方法

    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（）

html5--5-15 绘制阴影的更多相关文章

  1. HTML5 给图形绘制阴影(绘制五角星示例)

    几个属性 shadowOffsetX:阴影的横向位移量. shadowOffsetY:阴影的纵向位移量. shadowColor:阴影的颜色. shadowBlur:阴影的模糊范围. 属性说明 sha ...

  2. HTML5 绘制阴影

    代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8 ...

  3. HTML5 WebAudioAPI(四)--绘制频谱图2

    绘制分析器数组所有数据.本文内容,承接上文 1.800宽度绘制 var url='../content/audio/海阔天空.mp3'; if (!window.AudioContext) { ale ...

  4. iOS：quartz2D绘图（给图形绘制阴影）

    quartz2D既可以绘制原始图形,也可以给原始图形绘制阴影. 绘制阴影时,需要的一些参数:上下文.阴影偏移量.阴影模糊系数 注意:在drawRect:方法中同时调用绘制同一个图形时,在对绘制的图形做 ...

  5. Canvas 给图形绘制阴影

    /** * 图形绘制阴影 */ function initDemo6() { var canvas = document.getElementById("demo6"); if ( ...

  6. Html5 实现灯笼绘制

    最近在学习Html5,就用JavaScript在Canvas试着绘制了一个灯笼,并作了简要的说明. 具体绘制思路在页面上有说明,不再赘述,代码如下: <script type="tex ...

  7. HTML5 之Canvas绘制太阳系

    <!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> ...

  8. HTML5用canvas绘制五星红旗

    在HTML5一览中,我们提到html 5被冠以很多高帽,其中最高的一顶.备受争议的就是"Flash杀手".IT评论界老喜欢用这个词了,杀手无处不在.不管是不是杀手,HTML 5引进 ...

  9. html5的canvas绘制迷宫地图

    canvas标签一直是html5的亮点,用它可以实现很多东西.我想用它来绘画像迷宫那样的地图.借助到的工具有瓦片地图编辑器tiled(点击跳转到下载链接). 如图:如果你想要画像这样的迷宫地图,如果不 ...

随机推荐

  1. Ext.Ajax.request批量提交表单

    介绍一下批量提交grid中数据的问题 js文件中的提交方法如下: listeners: { click: function btnClick(button) { var win = button.up ...

  2. Java-线程池总结

    线程池的优点: 重用线程,减少线程创建和销毁的性能开销. 管理线程,并提供定时执行以及指定间隔循环执行等功能. Android中的线程来源于Java中的Executor,实现类是ThreadPoolE ...

  3. linux如和对其他用户隐藏进程？

    Linux kernel 3.2以上,root用户可以设置内核,让普通用户看不到其它用户的进程.适用于有多个用户使用的系统.该功能由内核提供,因此本教程适用于Debian/Ubuntu/RHEL/Ce ...

  4. 利用 apache ab 测试服务器性能

    安装步骤:https://blog.csdn.net/ahaaaaa/article/details/51514175 在Windows系统下,打开cmd命令行窗口,定位到apache安装目录的bin ...

  5. beautifulsoup的一些使用

    自动补全代码: import requests from bs4 import BeautifulSoup response=requests.get('https://www.ithome.com/ ...

  6. weblogic的几点配置

    2.在tomcat下写过滤器以后还有的地方需要手工转码<-->weglobic下也不用 eg:SubjectAction.java3.weblogic下anltr.jar有冲突,需要从外界 ...

  7. wince开发_摩托罗拉MC3100_打开条码设置

    呵呵不多说,直接上图 1.打开控制面板 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0 ...

  8. HDOJ题目2089 不要62(数位DP)

    不要62 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  9. binary-tree-maximum-path-sum——二叉树任意一条路径上的最大值

    Given a binary tree, find the maximum path sum. The path may start and end at any node in the tree. ...

  10. JavaScript 工厂模式和订阅模式

    设计模式的好处: 代码规范 // 例如表单验证,两个 input ,一个用户名,一个密码 // 通常做法是 function checkUser(){ //..... } function check ...