如何使用canvas设计出一个简易的画板

小编给大家分享一下如何使用canvas设计出一个简易的画板，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

成都创新互联公司网站建设由有经验的网站设计师、开发人员和项目经理组成的专业建站团队，负责网站视觉设计、用户体验优化、交互设计和前端开发等方面的工作，以确保网站外观精美、成都做网站、网站制作易于使用并且具有良好的响应性。

先看看效果吧

效果先描述一下哈：这里有一个canvas画布和几个按钮，canvas画布是一个画板，可以画任何的图形，按钮可以设置画板的画笔颜色，也可以清除画板，当然，你要是画出一副旷世奇画，请点击右键将图片另存为，你懂的！

那这个是怎么做的呢？

我先说原理在贴代码，方便大家理解，我都这样了，就不要直接拿来主义了哈！

原理其实很简单，这里用到的核心的方法是lineTo()和stroke()，看过前面的API文章的同学应该明白是什么意思，就是划线嘛

当在画布中，如果按下鼠标，我们将画布的起始点放在此时鼠标的位置，用到的是moveTo()，然后鼠标移动的时候，用lineTo()画路径，用stroke()来填充路径，移一下画一下，这样就能画出曲线来，当鼠标抬起的时候，我们只需要取消鼠标的动作即可，如果你看过我写的鼠标拖拽效果，是不是感觉很像啊，对的，思路跟拖拽是差不多的，只是具体的内容不一样而已，如果你没看过鼠标的拖拽效果，可以看这里 鼠标拖拽

下面的按钮因为各自控制的东西不一样，我用了一个switch方法来给各自添加效果，设置颜色用到的canvas属性是strokeStyle，清除画布的方法在API里面没有讲到，可能是讲漏了，这里说一下吧，这里是用的clearRect()方法，还是说一下吧：

clearRect(x,y,w,h)  在给定的矩形内清除指定的像素

参数：x,y 表示要清除的矩形的左上角的坐标， w,h 表示要清除的矩形的宽高

看到这参数，我们可以了解到，它可以清除局部的画布的内容，也可以清除整个画布的内容，看你给多大的区域了，本实例是清除的整个画布，因为我们需要整个画布都清除掉，如果你只想清除你不想要的那块，可以设置一个精确的区域，我就不在这里啰嗦了！

大致的原理就这么简单，我把代码贴出来供大家参考理解，顺便把效果地址贴出来体验一下，废话不多说了，看代码：

css:

*{ padding:0; margin:0;}body{ background:#ccc;}canvas{ background:#fff; margin:50px 10px; }input{ display:inline-block; width:80px; height:30px; cursor:pointer; margin-left:10px;}

html:

 
        亲，您的浏览器不支持canvas，换个浏览器试试吧！
    
    

        
        
        
        
        
    

js:

window.onload = function(){        var canvas = document.getElementById("canvas");        var ctx = canvas.getContext("2d");        var oInput = document.getElementsByTagName("input");        for(var i=0;i
哦，这里的一个细节忘记交代了，就是必须在绘图部分加上路径闭合，即beginPath()和closePath()，为什么？因为在每次鼠标抬起之后，切换下面的样式或者清除画布的时候，如果路径不闭合的话，那么后面的操作会污染前面所画的东西，比如前面用红画的，现在我切换到绿色，现在画的和原来画的都变成绿了，比如清除画布，画过一次之后清除，然后再画的时候第一次画的东西又出来了，这都不是我们想要的，所以此点需谨记！
看完了这篇文章，相信你对“如何使用canvas设计出一个简易的画板”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
            
            
                        

            当前标题：如何使用canvas设计出一个简易的画板            

            分享URL：http://bjjierui.cn/article/gpseeo.html