canvas笔记-阴影的使用
关于阴影有如下的几个属性
context.shadowOffsetX
context.shadowOffsetY
context.shadowBlur
其中blur的英文解释为模糊不清的,在canvas中填写一个数值即可
如下例子
程序运行截图如下:
源码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">当前浏览器不支持canvas
</canvas><script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.shadowColor = "gray";context.shadowOffsetX = 20;context.shadowOffsetY = 20;context.shadowBlur = 5;context.fillRect(200, 200, 400, 400);}</script></body>
</html>
把参数换成这样的:
<script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.shadowColor = "gray";context.shadowOffsetX = -50;context.shadowOffsetY = -50;context.shadowBlur = 50;context.fillRect(200, 200, 400, 400);}</script>
运行截图如下:
canvas笔记-阴影的使用相关推荐
- html语言填充没有只有描边,HTML5 Canvas笔记——交互绘制文本(描边、填充、阴影、渐变填充、图案填充、文本的属性设置)...
(1)文本的描边.填充.阴影 (2)文本的渐变填充 (3)文本的图案填充 (4)文本的属性设置及效果呈现 交互绘制文本.html 交互绘制文本 body { background: #eeeeee; ...
- html5 canvas修改颜色,html5 canvas 笔记二(添加样式和颜色)
色彩 Colors fillStyle = color设置图形的填充颜色.strokeStyle = color设置图形轮廓的颜色. 透明度 Transparency globalAlpha = tr ...
- html5菜鸟教程canvas笔记
简单介绍: canvas(图形容器) 标签是一个默认没有边框和内容的矩形画布,并且通过js实现绘制,js脚本先获取标签的id然后进行控制canvas,比如:1. <canvas id=" ...
- html5 canvas 笔记五(合成与裁剪)
组合 Compositing globalCompositeOperation syntax: globalCompositeOperation = type 注意:下面所有例子中,蓝色方块是先绘制的 ...
- canvas笔记-画三角形并计算其外心(含算法其他绘图框架类似)
程序运行截图如下: 源码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
- canvas笔记-文本(fillText)旋转(rotate)
这里fillText直接使用rotate会有问题.估计是旋转中心有问题. 正确的逻辑为: 先使用translate移动中心点在文本起始位置,如何在0,0处fillText即可. 如果要在字符串中心进行 ...
- canvas笔记-canvas加载图片及放缩及加水印(两canvas同时使用)
首先是图片放缩 程序运行截图如下: 拉动滑动条: 源码如下: <!DOCTYPE html> <html lang="en"> <head>&l ...
- canvas笔记-canvas中用户与图形交互
运行截图如下: 点击某个圆后: 代码如下: <!DOCTYPE html> <html lang="en"> <head><meta ch ...
- canvas笔记-扩展canvas的context及画椭圆及浏览器兼容问题
首先是扩展canvas的context 比如扩展一个画五角星的代码 <!DOCTYPE html> <html lang="en"> <head> ...
最新文章
- 大数据时代下的新生态、新洞察、新趋势 | 神策 2019 数据驱动大会
- C++ 随机函数----谈rand() 和 srand() 体会
- 物理IP和浮动IP分别的含义是什么
- patent sub categories
- ios 检测是否联网_秋招|阿里 iOS 五轮面经分享,已收到阿里的意向书
- Java面向对象(13)--==操作符与equals方法
- java 获得响应内容_Java 纯HTTP Get请求获取响应内容,如果302,继而获取重定向后的响应内容。...
- 前端取消置顶功能_短说开发日报:首页推荐频道刷新后首页置顶的数据没有加载出来的问题已修复(9.22周二)...
- java学习-BeanUtils给对象的属性赋值
- tensorflow 卷积:设定特定卷积核
- 小程序测试关注点之一-登录授权
- java字符串替换字符串_java string 字符串替换
- Windows打开热点断网解决方法
- 国家新标准上线,妈妈再也不用担心我吃辣条啦!
- 【深度学习】卷积神经网络应用之双阶段目标检测|R-CNN、SPP-Net、Fast-RCNN、Faster-RCNN
- 计算机二级小蒋是一位中学老师,计算机二级excel所有公式样稿.docx
- GPS卫星同步时钟(GPS授时服务器)在校园网络里的应用
- 全志h3通用固件_全志h3详细刷机教程
- 爬虫第十式:多线程爬取小米应用商店聊天社交类别
- bp神经网络mallat小波matlab,小波神经网络原理及其应用汇总.ppt