HTML5 canvas
文章平均质量分 53
☆叙
保持初心,努力向前,学习和分享
展开
-
canvas五子棋制作
canvas制作五子棋全部代码下载地址:运行截图说明使用canvas制作五子棋,主要使用到鼠标点击事件,获取鼠标点击在canvas中的坐标,然后在将该坐标进行变化,将其变为距离点击位置最近的的一个角的坐标(一个矩形有四个角,鼠标点击在棋盘的某个矩形上),之后开始绘制棋子,再使用一个东西判断是否切换棋子颜色,每次下棋都进行胜负判定,当满足条件时,显示结果。主要代码展示该代码作用是将鼠标点击位置的坐标转化为相对画布原点的坐标。c.addEventListener("click",原创 2021-01-28 09:45:59 · 403 阅读 · 1 评论 -
关于ctx.addEventListener is not a function的报错问题,以及获取canvas中鼠标点击的位置坐标
关于ctx.addEventListener is not a function的报错问题先插入一段代码,是未修改的代码,会产生ctx.addEventListener is not a function的报错。var cvs = document.getElementById("myCanvas"); var ctx = cvs.getContext("2d"); ctx.addEventListener("click",function(event){ getpieces(c,e原创 2021-01-13 11:41:42 · 4340 阅读 · 1 评论 -
HTML5 canvas 行星环绕
HTML5 canvas 行星环绕行星环绕效果展示(未做gif图,真实结果会自动环绕)原创 2021-01-12 10:02:17 · 1166 阅读 · 0 评论 -
初识HTML5 canvas时钟绘制
HTML5 canvas 时钟绘制canvas时钟绘制效果展示因为不会制作动态gif图,只能上传一张静态图了,此时钟会随时间变化原理说明代码展示<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>绘制时钟</title> <style type="text/css"> #hour,#min,#sec{原创 2021-01-08 18:56:22 · 395 阅读 · 0 评论 -
初识HTML5 canvas
HTML5 canvascanvas 介绍canvas是HTML5中自带的一个标签,它主要是用于图形的绘制。canvas是一个矩形容器,你可以把它理解为一个画布,在画布中,你需要使用JavaScript进行绘图。canvas使用准备<canvas id="myCanvas" width="400" height="500" style="border:1px solid #000000;">var c=document.getElementById("myCanvas");v原创 2021-01-07 11:40:00 · 160 阅读 · 0 评论