canvas drawbitmap不出现_JS实现简单的画板（canvas），可在PC和移动端实现。

最新推荐文章于 2022-10-19 20:08:11 发布

weixin_39805387

最新推荐文章于 2022-10-19 20:08:11 发布

阅读量235

点赞数

文章标签： canvas drawbitmap不出现

本文链接：https://blog.csdn.net/weixin_39805387/article/details/112120720

版权

本文介绍了如何使用JavaScript在HTML5的canvas上实现一个简单的画板功能，适用于PC和移动端。重点包括HTML结构、CSS样式和JS代码的编写。虽然在移动端存在一些浏览器刷新的bug，但整体功能可以正常运行。建议参考MDN文档深入学习canvas。

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

废话后面说，先上HTML代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>画板</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script src="main.js"></script>
  </body>
</html>

这是一个只有一个canvas标签的HTML代码其中有几点需要注意：

1.注意将lang（第二行的）值为zh-CN
2.注意加上第二个meta标签，这个在写移动端的时候起作用
3.link标签引用css代码
4.js的代码要在HTML之后引用，在前面的话获取元素会报错

上css代码

* {
    
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
#canvas {
    
  display:

最低0.47元/天解锁文章

weixin_39805387

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas drawbitmap不出现_JS实现简单的画板（canvas），可在PC和移动端实现。

废话后面说，先上HTML代码<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &...
复制链接

扫一扫