HTML5绘图元素与脚本
来聊聊HTML5上那个特别酷炫的涂鸦功能呗！你有木有试过在线胡乱涂抹呀？可别小看它，其实是利用我们熟悉的JavaScript编程语言去操控实现的！
标签只是容器
别纠结那破盒了，不就跟花瓶似的。想画好图？去学编程！
Canva的魔法
在无孔不入的Canva网页版上，你可以随心所欲画自己想要的图形~不仅仅是流程图、方块图、圆圈图、文字，甚至连图片也能放进去！这里的样式选择多得让人眼花缭乱，喜欢哪个选哪个就行了！
HTML5标签与绘图
别想靠HTML5的标签直接画图，其实最后还得用JavaScript。
getContext()方法的神奇
getContext()就能给你个超级棒的画板，里面全是实用的绘画工具任你玩转！尽情放飞想象！
老旧浏览器的烦恼
用IE8或者更旧版的话，这标签可就看不见！别忘了看看兼容不兼容~
画布的定义
网页上那个画布，其实就是个大方块咯。想要用起来，你要给它加点东西，取个(id)名儿，还要明白它有多大多宽
多个画布怎么办
对，可以放手去做不止一个。看似简单，用好了却能让网站变得更炫酷劲爆！
添加边框小技巧
别忘了使用style属性来添加边框。让你的画布更有层次感。
探秘getContext(“2d”)对象
HTML5那个二维的在线画板好火，快来试试看！动动手就可以画出直线、圆圈和正方形，甚至还能写字加放照片，真心简单得很！
填充风格设置
您的浏览器不支持 HTML5 canvas 标签。
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
你是不是担心不会给形状上色呀？别急，fillStyle这个属性能帮到你。只需挑选一个你喜欢的颜色或渐变色彩，就能使图形变得更加吸引人了。操作起来也很简单，只需输入填充矩形(x,y, width, height)这样四个参数即可。
线条绘制技巧
首先，我们要给起始点涂上颜色，用的是moveTo(x,y)这招儿；接下来就要告诉电脑终点在哪了，得用lineTo(x,y)来表示哦；最后别忘了打个烙印，stroke()搞定！
圆形的魔法
想在画板上画圈？学会stroke()和fill()两个函数就行了。用好这个技巧，画画效率马上翻番！
文本绘制技术
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
小伙伴们，学画 Canvas 时，记住这两点：一是用fillText(text,x,y)能画出有层次感的字；二是strokeText(text,x,y)可以做出空心字，这样你的画作就更具节奏感了哟~
Canvas渐变魔法
评论0