<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{margin: 0px;}
#c1{background: yellowgreen;}
</style>
</head>
<body>
<canvas id="c1" width="500" height="500"></canvas>
</body>
</html>
<script>
window.onload=function(){
var oc=document.getElementById("c1");
var ogc=oc.getContext("2d");
oc.onmousedown=function(ev){
var ev=ev||window.event;
ogc.moveTo(ev.clientX,ev.clientY);
document.onmousemove=function(ev){
var ev=ev||window.event;
ogc.lineTo(ev.clientX,ev.clientY);
ogc.stroke();
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
}
}
</script>
本文分享自 交互设计前端开发与后端程序设计 微信公众号,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ,欢迎热爱写作的你一起参与!