探索HTML5绘图功能
HTML5的绘图功能太酷，真的把我给迷住了！现在，我迫不及待地做了一个小游戏：涂鸦板。玩起来超想怎么画就怎么画，调整颜色，还有大中小三种画笔。你看HTML5的绘图功能多神奇，搞定点、线、面、圆、图片都轻松。而且点跟线在这里可是基础，有它们就能创造出各种各样的图案。真的是太好玩了，只有你想不到，没有它做不到的算法！
开始编写代码
先来上一段代码吧：
html
好，搞定了一个简单的绘图界面！接下来咱们来编写画直线的程序。这么基础的代码，肯定没问题的对？主要的核心就是编制了一个可供使用的程序模块，里面囊括了绘制画布、创立二维图形、画圆和初始化这个框架等等功能。
JavaScript代码实现
接下来就是JavaScript代码的时间啦：
“`javascript
// JavaScript代码
这段代码主要有几个意思：
$.Draw = {};
$.extend($.Draw, {
D2: "",
CX:"",
Box: "mycavas",//画布id
BoxObj:function(){//画布对象
this.CX=document.getElementById(this.Box);
},
D2:function(){//2d绘图对象
this.D2 = this.CX.getContext("2d");
},
Cricle: function (x, y, r, color) {//画圆
if (this.D2) {
this.D2.beginPath();
this.D2.arc(x, y, r, 0, Math.PI * 2, true);
this.D2.closePath();
if (color) {
this.D2.fillStyle = color;
}
this.D2.fill();
}
},
init: function () {//初始化
this.BoxObj();
this.D2();
}
})
搞定颜色空间和拖动条的change事件，这样就可以得到相应的颜色值和大小数字，然后存起来，备用。
2.初始化绘图对象。
捕捉鼠标点击、松开还有移动这些动作，在需要的地方弄个开关用来调节油墨。
书法之美
除了涂鸦板，别忘了我还会写字！你们知道吗？其实书法是一项挺深奥的艺术。你可以从字里行间感受到书写者的心情和修养。每一道笔触都是他们情绪的表达。写字就像讲故事，毛笔在纸面上自由驰骋，创作出一幅幅美丽的画卷。书法这东西可历史悠久了，每种字体都有自己的特点，用笔画就能展现出各种不同的风格和魅力。
提升用户体验
var color = "#000000";//初始化颜色
var size = 5;//初始化尺寸
document.getElementById('color1').onchange = function () {
color = this.value;
};
document.getElementById('size').onchange = function () {
size = this.value;
};
$.Draw.init();//初始化
var tag = false;//控制鼠标当前状态并起到开启油墨开关的作用
var current = {};//存储鼠标按下时候的点
document.onmousedown = function (option) {//鼠标按下事件
current.x = option.x;
current.y = option.y;
$.Draw.Cricle(option.x, option.y, size, color);
tag = true;
}
document.onmouseup = function () {//鼠标抬起事件
tag = false;
}
document.onmousemove = function (option) {//鼠标移动事件
if (tag) {
if (size >= 0) {
$.Draw.Cricle(option.x, option.y, size, color);
}
}
}
画板功能设计时，别忘了让用户用得痛快！加个撤销重做合集，就能轻松改错；作品直接存本地云端，想哪看就哪看；想晒晒就分享到社交网，创作快乐就这么简单！
优化绘图算法
咱们做绘图的时候，优化算法可不能忘了！通过精心设计绘图公式，简单点儿算，提个高效率的亮相，这样一来，画板就会更顺畅，更稳定了。不仅让用户用得舒心，它还能帮我们节约电脑内存，让整个软件跑起来更快！
引入动态效果
想让你的作品有趣点？试试加点动态效果！比如搞个绘画过程里的动画效果，或者加个特别的笔触和填充效果什么的。这样一来，你的作品就能立体起来，冲击力十足，用户也能边玩儿边画。
结合音乐元素
除了看的享受外，画板里也能玩儿音效！用各种笔画或色彩搭配各自的声音或背景乐，一边画图还能一边欣赏美妙的歌。这种混合式艺术享受，你绝对没试过！
分享与交流
好了，完工后别忘了和大家分享下成果！可以把你的作品发到社交网络或者艺术网站上，找人交流请教，相互提升。这样做，既能提高关注度，又能找到很多有共同兴趣的小伙伴。
评论0