首页 > 代码库 > （练习题）canvas画板（简）
（练习题）canvas画板（简）
canvas：IE9及以上版本，主流浏览器都支持。
注意：当需要设定canvas的高度时不要写在css中，canvas默认是300x150，在css中设置宽高相当于等比放大或者缩小了，canvas中的内容也会等比放大或者缩小。
<!DOCTYPE html><html lang=""><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style> #canvas { display: block; margin: 0 auto; border: 1px solid #000; } </style></head><body> <canvas id="canvas" width="600" height="600"></canvas> <script> var canvas = document.getElementById(‘canvas‘); var context = canvas.getContext(‘2d‘); canvas.onmousedown = function(ev) { var ev = ev || window.event; context.moveTo(ev.clientX - canvas.offsetLeft, ev.clientY - canvas.offsetTop); document.onmousemove = function(ev) { var ev = ev || window.event; context.strokeStyle = ‘yellow‘ context.lineTo(ev.clientX - canvas.offsetLeft, ev.clientY - canvas.offsetTop); context.stroke(); } document.onmouseup = function() { document.onmousemove = null; document.onmousedown = null; } } </script></body></html>
（练习题）canvas画板（简）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。