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>

View Code

学习要点

  • 掌握绘制阴影的方法

绘制阴影的方法

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

渐变色绘制方法

  1. createLinearGradient() 创建线性渐变
  • createLinearGradient(x1,y1,x2,y2)---颜色渐变的起始坐标和终点坐标
  • addColorStop(位置,"颜色值")---0表示起点...插入点...1表示终点，配置颜色停止点

createRadialGradient(x1,y1,r1,x2,y2,r2,) 创建放射状/环形的渐变 ....

渐变色绘制方法

  1. createLinearGradient() 创建线性渐变
  • createLinearGradient(x1,y1,x2,y2)---颜色渐变的起始坐标和终点坐标
  • addColorStop(位置,"颜色值")---0表示起点...插入点...1表示终点，配置颜色停止点

createRadialGradient(x1,y1,r1,x2,y2,r2,) 创建放射状/环形的渐变 ....

文字的绘制方法

  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（顺时针）

开始绘制：stroke()/fill（）

转载于:https://www.cnblogs.com/Renyi-Fan/p/7987352.html

html5--5-15 绘制阴影相关推荐

  1. 如何用html绘制阴影图形,HTML5 给图形绘制阴影

    在 HTML5 中,我们除了上一节讲过的可以对图形设置平移.旋转.缩放,还可以给图形添加阴影效果.添加阴影的时候只需要利用图形上下文对象的几个关于阴影绘制的属性就可以实现啦. 图形阴影绘制的属性 属性 ...

  2. matlab柱状图加阴影,matlab 绘制 阴影 柱状图 条形图

    matlab 绘制 阴影 柱状图 条形图 matlab 绘制 阴影 柱状图 条形图 matlab 绘制 阴影 黑白 柱状图 条形图 冰三点水 在科技文献写作等过程中,我们往往需要粘贴柱状图或者条形图, ...

  3. 【HTML5初探之绘制图像（上）】看我canvas元素引领下一代web页面

    弧度一块可能有误,需要再研究 导航 [初探HTML5之使用新标签布局]用html5布局我的博客页! [HTML5初探之form标签]解放表单验证.增加文件上传.集成拖放 [HTML5初探之绘制图像(上 ...

  4. 图片阴影怎么设置_HTML5 给图形绘制阴影

    在 HTML5 中,我们除了上一节讲过的可以对图形设置平移.旋转.缩放,还可以给图形添加阴影效果.添加阴影的时候只需要利用图形上下文对象的几个关于阴影绘制的属性就可以实现啦. 图形阴影绘制的属性 sh ...

  5. 用html画一个企鹅图案的代码,HTML5 Canvas来绘制图形

    1.HTML5元素用于图形的绘制,通过脚本(通常是javascript)来完成. 2.标签只是图形容器,必须使用脚本来绘制图形. 3.可以通过多种方法通过Canvas绘制路径.盒.圆.字符以及添加图像 ...

  6. html坐标绘制路径,HTML5 CANVAS：绘制路径

    一条HTML5 canvas路径是通过绘制指令来连接一系列的点,由这一系列的点构成直线或曲线.路径可以用于在HTML5 canvas上绘制各种类型的图形:直线.圆形.多边形等等.路径的绘制是canva ...

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

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

  8. 解决Html5用canvas绘制不出来图片的问题

    转载自   解决Html5用canvas绘制不出来图片的问题 如果使用html5的ctx.drawImage(img,0,0);绘制不出来, 就改为: img.onload = function(){ ...

  9. HTML1个像素宽的代码,HTML5 Canvas中绘制一个像素宽的细线实现代码详情

    正统的HTML5 Canvas中如下代码ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); ct ...

最新文章

  1. Go 语言 bytes.buffer write 相关操作
  2. 五款主流 Linux 发行版性能对比，稳而不强？
  3. HDU4622(后缀自动机)
  4. win10 + Terminal + WSL+ oh-my-zsh 配置漂亮实用的windows终端及配置ubuntu不加.exe打开windows程序
  5. 【ElasticSearch】Es 源码之 Discovery DiscoveryModule Coordinator 源码解读
  6. app营销实训报告_第七届全国金融与证券投资模拟实训大赛圆满落幕!
  7. 一份好的商业计划书该怎么写
  8. CUDA C编程（二）CUDA编程模型
  9. 在线报刊html代码,数字报纸HTML版本
  10. 软件开发中常各类软件开发文档的英文缩写
  11. 漫威 DC 英雄综合实力排位，这人秒杀灭霸
  12. python xlrd使用_在Python中使用xlrd以文本形式读取数值Excel数据
  13. OOP Class具体解释
  14. Redis-有序集合(Zset)数据结构
  15. 【高等数学如何学，做题方法，期末突击】
  16. 2018哈理工院个人赛、校团队赛总结
  17. 一个数如果恰好等于它的因子之和，这个数就称为 “完数 “。例如6=1＋2＋3.编程 找出1000以内的所有完数。
  18. iOS开发 区分Home键和锁屏键事件
  19. 2021年NBA季后赛第四轮总决赛晋级预测
  20. 云服务器修复,云服务器修复

热门文章

  1. 英特尔全栈解决方案，助推人工智能在多领域的落地发展
  2. Spring Cloud Gateway CORS 方案看这篇就够了
  3. 当 Docker 遇到 Intellij IDEA，再次解放了生产力~
  4. 国产的markdown 语法的思维导图和大纲工具！
  5. IDEA高级用法：集成JIRA、UML类图插件、SSH、FTP、Database管理...
  6. 5 门可能衰落的编程语言
  7. API 网关从入门到放弃
  8. 本周日，王海峰、黄铁军、朱军、李宏毅等大咖邀你加入这场AI开发者盛宴！...
  9. 数据项目总结：王者荣耀总决赛预测！
  10. 西瓜书_学习任务_更新至9.5号