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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了微信 java 实现js-sdk 图片上传下载完整流程的相关资料,需要的朋友可以参考下2016-10-10
php上传图片并给图片打上透明水印的代码，需要的朋友可以参考下。2010-06-06
JavaScript 核心参考教程RegExp对象,学习正则表达式的朋友可以参考下。2009-10-10
各种方法判断客户端浏览器是否安装了Flash插件，对于必须要支持flash才能浏览的页面来说，提前做下说明，用户体验会更好。2010-08-08
这篇文章主要介绍了Bootstrap实现响应式导航栏效果，导航栏是一个很好的功能，是Bootstrap网站的一个突出特点，本文带领大家学习实现Bootstrap导航栏,需要的朋友可以参考下2015-12-12
这篇文章给大家介绍了js function()构造函数的知识以及关于function()构造函数需要注意的几个要点，本文介绍的非常不错，具有参考借鉴价值，感兴趣的朋友一起看下吧2016-08-08
这篇文章主要介绍了解决前端跨域问题8种方案的相关资料,需要的朋友可以参考下2016-11-11
js 验证密码强弱的小例子，需要的朋友可以参考一下2013-03-03
Javascript中valueOf与toString区别浅析
Javascript中valueOf与toString区别浅析，需要的朋友可以参考一下2013-03-03
这篇文章主要为大家详细介绍了微信小程序实现tab页面切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
最新评论