Javascript中canvas绘制五子棋棋盘

最新推荐文章于 2024-07-13 14:53:05 发布

粥要熬

最新推荐文章于 2024-07-13 14:53:05 发布

阅读量6.4k

点赞数 3

分类专栏： JavaScript 文章标签： javascript 五子棋 canvas

本文链接：https://blog.csdn.net/qq_36009964/article/details/71295194

版权

这篇博客介绍了如何利用JavaScript中的canvas元素来绘制五子棋的棋盘。通过box-shadow属性，详细解释了如何设置阴影效果，包括水平偏移量、垂直偏移量、模糊半径和阴影颜色等参数，最终实现棋盘的视觉效果。

摘要由CSDN通过智能技术生成

box-shadow:给元素块周边添加阴影效果。
语法：box-shadow: h-shadow v-shadow blur spread color inset；
h-shadow:（必须）阴影的水平偏移量，如果是正值，则阴影在元素块右边；如果是负值，则阴影在元素块左边。
v-shadow:（必须）阴影的垂直偏移量，如果是正值，则阴影在元素块底部；如果是负值，则阴影在元素块顶部。
blur:（可选）阴影的模糊半径，其值大于等于0；为0时阴影不具有模糊效果，值越大阴影边缘越模糊。
spread:（可选）阴影扩展半径，值为正，整个阴影都扩大；值为负，整个阴影都缩小。
color:（可选）阴影颜色。
insert:（可选）不设值则默认为外部阴影，取insert则投影为内阴影。
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五子棋</title>
    <style type="text/css">
        canvas{
        display: block;