合肥网站建设工作室

关注合肥工作室微信公众号,提供最新网站建设资讯

扫一扫微信二维码

html5的canvas写一个简单的画板程序

2012-06-01 19:52:50建站知识 244

这里讲一下思路.其实这里的逻辑相当的简单,鼠标按下的时候.获得按下时候的坐标UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 ctx.moveTo(e.clientX-10,e.clientY-10)UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 然后鼠标移动的时候.就不断的画线UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 !isDown||ctx.lineTo(e.clientX-10, e.clientY-10, 5, 5)UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 鼠标放开的时候.自然就要吧isDown设置为false了.UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 然后就总结一下画线的关键步骤好了.UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 第一步是取得画布.UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 第二步是开始画线.beginPath()UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 第三步是移动线条moveTo(),lineTo().UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 第四步就是画线stroke().UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室
 <!DOCTYPE html>UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

<html lang="en">UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

<head>UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

<title>画线例子</title>UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

<script type="text/javascript">UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

        window.onload = function()UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

        {UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

                if(document.getElementById('c'))UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

                {UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

                         var isDown = false;//判断是否按下UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

                         var ctx = $('#c').get(0).getContext('2d');//取得画布UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

                         ctx.strokeStyle = 'black';//线条颜色UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

                         ctx.beginPath();//开始画线UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

                         $('body')UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

                         .mousedown(function(e){UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

                                isDown = true;UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

                                ctx.moveTo(e.clientX-10,e.clientY-10);//画笔拿起放到哪一点UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

                         })UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

                         .mousemove(function(e){UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

                                !isDown||ctx.lineTo(e.clientX-10, e.clientY-10, 5, 5); //画笔画到哪一点UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

                                 ctx.stroke();//画线函数UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

                         })UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

                         .mouseup(function(){UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

                                isDown = false;UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

                         });UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

                }else{alert('ss');}UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

        }UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

</script>UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

<style type="text/css">UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

        #c{ border:1px solid black;}UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

</style>UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

</head>UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

<body>UVf合肥网站工作室|合肥网站建设优化推广 - 合肥LZ建站工作室

<canvas id="c" width="900" height="600">

本文关键词
html5画板,canvas画板