一.阴影

shadowOffsetX与shadowOffsetY的值代表阴影偏移的坐标点。

如果值是正数，那么往右、下偏移；如果值是负数，那么往左、上偏移。

shadowOffBlur的值越大，模糊效果就越明显。

shadowColor：阴影的颜色。

二.源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>阴影</title><style>canvas{border: 1px solid black;}</style>
</head>
<body><canvas width="600" height="400" id="myCanvas"></canvas>
</body>
</html>
<script>var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");ctx.shadowOffsetX = 1;ctx.shadowOffsetY = 1;ctx.shadowOffBlur = 1;ctx.shadowColor = "red";ctx.font = "30px 宋体";  //绘制文字的大小和名称ctx.fillText("光与影的对决",100,100);  //绘制文字内容和坐标位置。
</script>

三.效果图

篇章

上一篇：canvas教程11-渐变

下一篇：canvas教程13-使用图片

canvas教程12-阴影相关推荐

Python-EEG工具库MNE中文教程(12)-注释连续数据
目录注释连续数据(Annotating continuous data) 通过代码创建注释可视化原始对象交互式注释原始对象对注释对象的操作本分享为脑机学习者Rose整理发表于公众号:脑机接口 ...
canvas教程9-线型的属性
文章目录一.线型知识二.图案V的案例 1.源码 2.效果图三.虚线案例 1.源码 2.效果图篇章一.线型知识 lineWidth属性: 设置线的粗细,属性值必须是数字,默认是1且没有单位. ...
html2canvas教程_HTML5 Canvas教程：简介
html2canvas教程 Interested in CSS animation? Check out Creating Animations with CSS, a complete course ...
黑马lavarel教程---12、lavarel验证码
黑马lavarel教程---12.lavarel验证码一.总结一句话总结: 用插件的时候仔细看插件的版本要求 1.lavarel安装验证码插件的时候,如果(可选)需要定义自己的配置,则需要生成配置 ...
NODE-WEBKIT教程(12)全屏
node-webkit教程(12)全屏文/玄魂目录 node-webkit教程(12)全屏前言 12.1 和全屏有关的三个api Window.enterFullscreen() Window ...
STM32 电机教程 12 - BLDC 闭环电流控制
前言无刷直流 (Brushless Direct Current, BLDC)电机是一种正快速普及的电机类型,它可在家用电器.汽车.航空航天.消费品.医疗.工业自动化设备和仪器等行业中使用.正如名称 ...
STM32 进阶教程 12 - M4的硬件乘法器使用
前言 Cortex-M4支持硬件浮点运算单元(有些厂商直接说成DSP模块),本节将给大家介绍STM32F407芯片中硬件浮点运算单元中的使用及带来的性能对比. 示例详解基于硬件平台: 正点源子的st ...
STM32 基础系列教程 12 – ADC 中断
前言学习stm32 adc模数转换接口使用,学会用STM32对模拟信号时行采样,通过中断模式得到ADC结果. 示例详解基于硬件平台: STM32F10C8T6最小系统板, MCU 的型号是 STM ...
Magento教程 12：Magento快速上传大量商品的方法
利用.CSV档上传大量商品是最佳选择在Magento上传大量商品到时,经常会遇到的几个问题,非常耗时间.出现错误.有部分商品是缺货状态. 当你有上百个不同属性的商品,而且只有部分商品是现货供应的情况 ...

canvas教程12-阴影

文章目录

一.阴影

二.源码

三.效果图

篇章

canvas教程12-阴影相关推荐

最新文章

热门文章