怎样使用html5 canvas制作涂鸦画板

这篇文章给大家分享的是有关怎样使用html5 canvas制作涂鸦画板的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
　　清空画板
　　Line width : 1
　　3
　　5
　　7
　　9
　　11
　　Color : black
　　blue
　　red
　　green
　　yellow
　　gray
　　HTML代码
　　我们需要一个用于绘画的canvas元素和一些用于选择操作的下拉框：
　　JAVASCRIPT
　　我们的涂鸦画板js脚本主要有三个函数：
　　InitThis()：该方法用于初始化所需要的鼠标事件。
　　Draw()：该方法在鼠标左键被按下时每次移动都会画一条线。
　　clearArea()：该方法用于清空画板上免费云主机、域名的所有线条。
　　var mousePressed = false;
　　var lastX, lastY;
　　var ctx;
　　function InitThis() {
　　ctx = document.getElementById(‘myCanvas’).getContext(“2d”);
　　$(‘#myCanvas’).mousedown(function (e) {
　　mousePressed = true;
　　Draw(e.pageX – $(this).offset().left, e.pageY – $(this).offset().top, false);
　　});
　　$(‘#myCanvas’).mousemove(function (e) {
　　if (mousePressed) {
　　Draw(e.pageX – $(this).offset().left, e.pageY – $(this).offset().top, true);
　　}
　　});
　　$(‘#myCanvas’).mouseup(function (e) {
　　mousePressed = false;
　　});
　　$(‘#myCanvas’).mouseleave(function (e) {
　　mousePressed = false;
　　});
　　}
　　function Draw(x, y, isDown) {
　　if (isDown) {
　　ctx.beginPath();
　　ctx.strokeStyle = $(‘#selColor’).val();
　　ctx.lineWidth = $(‘#selWidth’).val();
　　ctx.lineJoin = “round”;
　　ctx.moveTo(lastX, lastY);
　　ctx.lineTo(x, y);
　　ctx.closePath();
　　ctx.stroke();
　　}
　　lastX = x; lastY = y;
　　}
　　function clearArea() {
　　// Use the identity matrix while clearing the canvas
　　ctx.setTransform(1, 0, 0, 1, 0, 0);
　　ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
　　}感谢各位的阅读！关于“怎样使用html5 canvas制作涂鸦画板”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

相关推荐: Node.js中怎么设置站点目录

这篇文章主要介绍“Node.js中怎么设置站点目录”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Node.js中怎么设置站点目录”文章能帮助大家解决问题。 一、为什么需要设置站点目录在Web服务器中，站点目录是指Web…