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" /><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: block;
}

注意：

先清除默认样式，然后把盒模型定义为border-box
canvas的默认display为inline，这里改为block
canvas 当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。
我写宽高是通过js实现的，直接把宽高改为浏览器的窗口的大小

上JS代码

var canvas = document.getElementById("canvas");
//将canvas的宽高设置为浏览器可视的宽高
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;var ctx = canvas.getContext("2d");
//填充的颜色
ctx.fillStyle = "black";
//边框
ctx.strokeStyle = "none";
//用来标记的变量，当鼠标按下时为true，松开时为false
var flag = false;
//记录鼠标之前的位置的数组
var position = [0, 0];
//线的宽度
ctx.lineWidth = 5;
//连接的方式
ctx.lineCap = "round";
//通过判断ontouchstart来判断时移动端还是PC端，当时在移动端的时候监听一些时间，当在PC端的时候监听一些事件
if ("ontouchstart" in document.documentElement) {//监听手指按下的事件canvas.ontouchstart = function (e) {//记录手按下时的位置position[0] = e.touches[0].clientX;position[1] = e.touches[0].clientY;};canvas.ontouchmove = function (e) {//调用draw函数来画，函数最后面有写draw(position[0], position[1], e.touches[0].clientX, e.touches[0].clientY);position[0] = e.touches[0].clientX;position[1] = e.touches[0].clientY;};
} else {//如果不是移动端的话，监听这些属性canvas.onmousedown = function (e) {//当鼠标按下的时候flag为true，然后记录位置flag = true;position[0] = e.clientX;position[1] = e.clientY;};canvas.onmousemove = function (e) {if (flag) {//画线，然后记录位置draw(position[0], position[1], e.clientX, e.clientY);position[0] = e.clientX;position[1] = e.clientY;}};canvas.onmouseup = function () {//鼠标松开后flag为falseflag = false;};
}
//画线的函数
function draw(starX, starY, endX, endY) {ctx.beginPath();ctx.moveTo(starX, starY);ctx.lineTo(endX, endY);ctx.closePath();ctx.stroke();
}

以上便是我写的代码，我已将代码上传GitHub，链接：

https://github.com/1446450047/My-Code-Exercise/tree/master/Drawing-boardgithub.com

我的效果：可以直接画噢，也可以在移动端实现，但是在移动端的话有的浏览器从上往下划的时候的刷新，所以还是有一些bug的

画板1446450047.github.io

如果大家想系统化的再学习canvas的用法可以参考MDN文档：

Canvas的基本用法developer.mozilla.org

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

Fabricjs一个简单强大的Canvas绘图库快速入门
场景 Fabric官网 Fabric.js Javascript Canvas Library Fabric.js 是一个可以简化 Canvas 程序编写的库. Fabric.js 为 Canvas ...
html5画板功能,JS实现canvas简单小画板功能
本文实例为大家分享了JS实现canvas简单小画板的具体代码,供大家参考,具体内容如下 Html部分: Document CSS部分: *{ margin: 0; padding: 0; list-s ...
轻量级的Canvas类库zrender使用笔记：简单自定义图件开发
ECharts,一个纯 Javascript 的图表库,底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表.当然我们自己可能有些需求,通过修 ...
canvas.drawBitmap(）画出来的bitmap和原bitmap大小不同，有一部分缺失了
造成这个问题的原因就在于安卓系统会根据bitmap的density和当前运行设备的density进行比较,不同会进行缩放. 项目里的图片叫 ic_launcher.png,大小是72*72,只有一张, ...
Html5 canvas 简单画布画板涂鸦例子
简单的Html5 canvas 画板涂鸦例子,巧妙的使用onmousemove 事件来实现画画, 可以实现指定颜色和宽度,如图: <!DOCTYPE HTML> <html>& ...
html：canvas画布绘图简单入门-画板-5
canvas示例系列: html:canvas画布绘图简单入门-1 html:canvas画布绘图简单入门-2 html:canvas画布绘图简单入门-绘制时钟-3 html:canvas画布绘图简单 ...
java canvas 缩放图片_详解如何用HTML5 Canvas API控制图片的缩放变换
摘要:这篇HTML5栏目下的"详解如何用HTML5 Canvas API控制图片的缩放变换",介绍的技术点是"html5_canvas.canvas.Html5.控制图片 ...
写了一个简单的画板箭头比较难搞虚线虚直线实线实直线椭圆圆正方形
1. 下载图片 public Runnable saveFileRunnable = new Runnable() {@Overridepublic void run() {try {if (!Tex ...
Android-实现简单画图画板
效果如图: 布局文件: <span style="font-family:KaiTi_GB2312;font-size:18px;"><RelativeLayou ...

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

废话后面说，先上HTML代码

上css代码

上JS代码

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

最新文章

热门文章