canvas实现简单的画图工具中画笔效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas实现简单的画图工具中画笔效果相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas实现简单的画图工具中画笔效果</title> </head> <body> <canvas width="500" height="500" style="background:#eee;"></canvas> <script> var canvas = document.getElementsByTagName(‘canvas‘)[0]; var con = canvas.getContext(‘2d‘); canvas.onmousedown = function(e){ var mx = e.layerX, my = e.layerY; con.moveTo(mx,my); canvas.onmousemove = function(e){ var ex = e.layerX, ey = e.layerY; con.lineTo(ex,ey); con.stroke(); } canvas.onmouseup = function(){ canvas.onmousemove = null; canvas.onmouseup = null; } } </script> </body> </html>
以上是关于canvas实现简单的画图工具中画笔效果的主要内容，如果未能解决你的问题，请参考以下文章