美文网首页
棋盘实现

棋盘实现

作者: tency小七 | 来源:发表于2018-02-04 16:24 被阅读0次

    canvas用于绘制图像(通过javascript)

    html5中canvas元素仅仅是图像的容器,要通过getContext()方法来创建一个绘画的环境,以及其他命令来进行绘画。

    1. html Dom中的getContext()方法
    • 定义与用法
      用于返回一个用于在画布上绘画的环境
    • 参数
      getContext('2d')
      因为当前只有2d是合法的,此方法会返回一个环境对象,此对象会接入一个二维绘画的API。如果以后支持3D绘画,3d这个参数才可以使用。
    1. beginPath()
    • 定义与用法
      定义起始路径或重置当前路径。
      一般作为定义起始点之前的一个方法。要和closePath()相对应。
    1. moveTo()
    • 定义与用法
      将路径移动到指定点。也就是在beginPath()之后,调用moveTo(0,0),也就是将起始点移动到画布上的二维坐标(0,0)。
    1. lineTo()
    • 定义与用法
      添加一个新点,在画布中创建从起始点到此新点的一条直线。
      例如:
      moveTo(0,0);lineTo(100,100)
      其作用也就是在(0,0)和(100,100)连成一条直线。
    1. stroke()
    • 定义与用法
      绘制定义路径。
      例如:
      moveTo(0,0);lineTo(100,100)
      其作用也就是在(0,0)和(100,100)连成一条直线。但是如果没有stroke()方法的话,这条直线我们是看不到的。
    1. fill()
    • 定义与用法
      填充内容。
      stroke()是描边,fill()是填充。
    使用chrome时,应该将绘制画布的<script>方法放在<body>标签中的<canvas></canvas>的下面。因为chrome需要文档载入完成之后才可以获得canvas对象。

    onclick=fun(e)

    • 点击事件里面有一个参数e,e也就代表了这个点击事件。
      e对象中有很多变量,其中有一个offsetX,offsetY.
      offsetX:鼠标指针位置相对于触发事件的对象的X坐标。
      offsetY:鼠标指针位置相对于触发事件的对象的X坐标。
    使用box-shadow时踩了一个坑!希望以后可以多多注意一下。主要是不要乱弄逗号。
    • 定义与用法
      box-shadow: h-shadow v-shadow blur spread color inset;
      h-shadow:水平阴影位置(必需)
      v-shadow:垂直阴影位置 (必需)
      spread:阴影尺寸
      blur:模糊距离
      inset:将默认外部阴影(outset)改为内部阴影
    • 实例
      div{box-shadow: 10px 10px 5px #888888;}
      div{box-shadow: 10px 10px 5px #888888,10px 10px 5px #888888}
    1.png

    相关文章

      网友评论

          本文标题:棋盘实现

          本文链接:https://www.haomeiwen.com/subject/vdvezxtx.html