作者:mmmm的海角_771 | 来源:互联网 | 2020-08-08 23:32
前面讲了一部分的canvasAPI的基础知识,光看API的介绍确实是很无趣乏味,需要一点可以激发内心的激情的东西来激励自己来学习,于是就了伴随canvasAPI学习的小实例,这样通过API的知识,结合小实例的应用,就可以更好的去理解canvas的这些属性和方法,也可以激发自己创造canvas特效的灵感和感觉,恩恩,请叫我雷锋,不谢!
前面讲了一部分的canvasAPI的基础知识,光看API的介绍确实是很无趣乏味,需要一点可以激发内心的激情的东西来激励自己来学习,于是就了伴随canvasAPI学习的小实例,这样通过API的知识,结合小实例的应用,就可以更好的去理解canvas的这些属性和方法,也可以激发自己创造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设计出一个简易的画板的详细内容,更多请关注 第一PHP社区 其它相关文章!