plbowter / canvas-demo

预览链接：https://plbowter.github.io/canvas-demo/

简介

• mouse 事件

• div 画圈

• canvas 画圈

• 全屏 canvas

• 橡皮擦

• 项目在线访问

准备

本项目技术栈基于 ES2015+、canvas

canvas 相关文档：

• Canvas 文档

命令

结构

├── index.html                 // div 画圈的 html 结构
├── main.js                    // div 画圈的 js 文件
├── style.css                  // div 画圈的 css 样式文件
├── canvasDemo1.html           // canvas 的 demo
├── canvas.html                // canvas 综合案例，实现 `canvas 画圈`和 `橡皮擦` 的功能，解决全屏问题。以及代码的优化
├── index.js                   // canvas.html 文件中引用的 js 文件
├── main.css                   // canvas.html 文件中引用的 css 样式文件
└── canvas-demo 踩坑记录.pdf    // 记录本项目中遇到的一些问题，以及解决方法

浏览器支持

IE10+
Edge
Chrome
Firefox
Safari

预览地址

https://plbowter.github.io/canvas-demo/