javascript+Canvas实现画板功能
更新时间：2020年06月23日 15:59:04 作者：许俊活
这篇文章主要为大家详细介绍了javascript+Canvas实现画板功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Canvas实现画板功能的具体代码，供大家参考，具体内容如下
CSS样式代码
body,
html {
text-align: center;
padding-top: 20px;
/*margin: 0;*/
}
canvas {
box-shadow: 0 0 10px #333;
margin: 0 auto;
/*position: absolute;
left: 0;
border: 1px solid red;*/
}
这是主体代码
<body onload="draw()">
<canvas id="canvas" width="800" height="600">
</canvas>
<script>
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
//涂鸦
//添加鼠标按下事件
canvas.onmousedown=function(e){
var ev=e||window.event;//兼容性
var x=ev.clientX-canvas.offsetLeft;
var y=ev.clientY-canvas.offsetTop;
ctx.strokeStyle='red';
ctx.lineWidth=10;
ctx.beginPath();
ctx.moveTo(x,y);
//onmousemove
canvas.onmousemove=function(e){
var ev=e||window.event;//兼容性
var x=ev.clientX - canvas.offsetLeft;
var y=ev.clientY - canvas.offsetTop;
ctx.lineTo(x,y);
ctx.stroke();
}
canvas.onmouseup=function(){
canvas.onmousemove="";//当鼠标不点击时则不会画画
}
}
}
}
</script>
</body>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Apollo 是一个广泛使用的 JavaScript 第三方库,主要用于构建与 GraphQL API 交互的应用程序,下面就跟随小编一起来学习一下它的具体应用吧2024-02-02
这篇文章主要介绍了微信小程序中this.setData的使用和注意事项,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-08-08
这篇文章主要介绍了JavaScript中 Promise 的使用技巧，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
高阶函数：英文叫Higher-order function。JavaScript的函数其实都指向某个变量。下面这篇文章主要给大家介绍了关于JavaScript中高阶函数的魅力，文中通过示例代码介绍的非常详细，需要的朋友可以参考下2018-09-09
在wabpack 核心功能除了loader应该就是plugins插件了，本文主要介绍了Webpack4 plugins 实现原理，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
最常见的方式是使用js函数操作excle文件，这种方式可能因浏览器不同，存在兼容性问题。另一种简单方法就是导出一个excel能识别格式的xml文件，用excel打开。2013-07-07
本篇文章主要介绍了Javascript的面向对象，对对象方法的调用、私有方法、静态方法、公有方法、特权方法进行了一一介绍，需要的朋友可以看下2016-12-12
本篇文章主要是对javascript 密码框防止用户粘贴和复制的实现代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
这篇文章主要介绍了Base64(二进制)图片编码解析及在各种浏览器的兼容性处理,需要的朋友可以参考下2017-02-02
对于JS框架开发中的客户端（浏览器）兼容难题，各位想必都不陌生。平常，我们都用if去面对接口不一致以及成堆的bug。然而，这里介绍的方法却可以让兼容更加优雅2011-10-10
最新评论