（练习题）canvas画板（简）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了（练习题）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画板（简）的主要内容，如果未能解决你的问题，请参考以下文章