canvas笔记-阴影的使用
生活随笔
收集整理的這篇文章主要介紹了
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笔记-阴影的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python笔记-安装python虚拟环
- 下一篇： 信息安全工程师笔记-综合知识冲刺（三）