你好！我要给你说说一个超好玩的话题——Canvas怎么用来定制头像的！如果你和我一样喜欢编程，肯定会觉得特别有意思。前段时间，我接到一个工作，就是把我们公司网站的头像功能换成用Canvas做。刚开始有点小紧张，因为这可是我第一次接触Canvas。不过，挑战，当然得接受，对？
Canvas的基础知识
简单点说，Canvas就像个大白纸，能让我们在网页上涂鸦。想怎么画就怎么画，这不是刚好适合做自定义头像吗？
Canvas用起来不难，但是得懂点编程。得会造Canvas元素，拿到它的上下文，然后用画图函数做自己的头像。就这么简单！
创建Canvas元素
首先，我们需要在项目里搞个Canvas元素，然后把它放在图片上面。这就好比给图片加了个屏障，用户能在这个屏障(Canvas)上玩儿图片，不再直接动图片。用Javascript，咱们就能把Canvas弄出来，再调整大小和位置，让它严丝合缝地盖住图片。
首先，得搞到Canvas的环境，才能开始绘画~你只需用Canvas元素的getContext方法，就能拿到一个2D画布环境，接着就可以随心所欲地画画！
实现图片的截取功能
想要让大家自己选头像？那就得先把你喜欢的那部分图片给截下来。这事儿其实挺简单的，分几步就能搞定：首先，咱们得把图片所在的那个DOM元素变成Canvas，这样才能在上面画画。这时候，html2canvas这个小帮手就能派上用场了。
搞定之后，就用Canvas里那个drawImage给图片剪裁呗。这个方法让你选个矩形框，然后把框里的那部分图搞出来。虽然看起来有点儿复杂，但弄明白了其实挺简单的。
添加交互事件
function createCanvasByClassName(tag) {
var canvasInitialWidth = $('.' + tag).width();
var canvasInitialHeight = $('.' + tag).height();
var left = $('.' + tag).offset().left - $('.' + tag).parent('.portraitContainer').offset().left + 1;
var top = $('.' + tag).offset().top - $('.' + tag).parent('.portraitContainer').offset().top + 1;
//var left = $('.' + tag).offset().left + 1;
//var top = $('.' + tag).offset().top + 1;
clearCanvasObj.left = $('.' + tag).offset().left + 1;
clearCanvasObj.top = $('.' + tag).offset().top + 1;
// clearCanvasObj.left = left;
// clearCanvasObj.top = top;
var canvasElement = $('');
var randomNum = Math.floor(getRandom(0, 10000));
clearCanvasObj.canvasId = randomNum;
canvasElement.attr({
id: 'canvas',
width: canvasInitialWidth,
height: canvasInitialHeight
});
canvasElement.css({
position: 'absolute',
top: top,
left: left
});
//$('body').append(canvasElement);
var appendEle = $('.portraitContainer').append(canvasElement);
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//ctx.fillStyle = "rgba(211,211,216,0.5)";
ctx.clearRect(0, 0, canvasInitialWidth, canvasInitialHeight);
ctx.fillStyle = "rgba(0,0,0, 0.4)";
ctx.fillRect(0, 0, canvasInitialWidth, canvasInitialHeight);
return canvas;
}
我们得在Canvas上加几个互动效果，才能让大家能挑选自己喜欢的头像区域。这就需要处理一下鼠标按、移、放等事件，这样就能知道你在屏幕上怎么动来操作头像了。
当你敲击鼠标左键时，我就会记住起始点在哪儿；接着你开始晃动鼠标的话，我会根据现在的位置和之前的起始点算出一个新的画像区域并立马展示出来。当你不再按鼠标的那刻，我就不会再更新头像区域了，而且我会把你选好的画像保留下来！
处理截取后的图片
选好头像地方以后，别忘了给弄个美美的处理，比如缩放啊、修边啊啥的，这样头像才更上档次！
搞定拉！现在我们把修好的图放网页上，让你当个性头~还能给你一些其他好玩的操作，像是存个头像在家用电脑，或者传到网上去摸鱼什么的都行！
function mousemoveFunc(event) {
/* Act on the event */
var nowMouseX = event.clientX - clearCanvasObj.left;
var nowMouseY = event.clientY - clearCanvasObj.top;
if (nowMouseX >= clearCanvasObj.xStart && nowMouseX = clearCanvasObj.yStart && nowMouseY = clearCanvasObj.xStart + clearCanvasObj.width - 10) && (nowMouseX = clearCanvasObj.yStart + clearCanvasObj.height - 10) && (nowMouseY = outerDomWidth) {
clearCanvasObj.xStart = outerDomWidth - clearCanvasObj.width;
}
if ((clearCanvasObj.yStart + clearCanvasObj.height) >= outerDomHeight) {
clearCanvasObj.yStart = outerDomHeight - clearCanvasObj.height;
}
// console.log('2', clearCanvasObj.xStart, clearCanvasObj.yStart)
ry_CTX.clearRect(clearCanvasObj.xStart, clearCanvasObj.yStart, clearCanvasObj.width, clearCanvasObj.height);
produceSmallPic(clearCanvasObj.xStart+clearCanvasObj.left, clearCanvasObj.yStart+clearCanvasObj.top, clearCanvasObj.width, clearCanvasObj.height, imageURL)
clearCanvasObj.mouseX = event.clientX;
clearCanvasObj.mouseY = event.clientY;
}
//拖拽小方框
if (clearCanvasObj.isRightCorner) {
ry_CTX.fillStyle = clearCanvasObj.color;
ry_CTX.fillRect(clearCanvasObj.xStart, clearCanvasObj.yStart, clearCanvasObj.width, clearCanvasObj.height);
var realDistance = Math.min(xDistance, yDistance)
clearCanvasObj.width += realDistance;
clearCanvasObj.height += realDistance;
//拖动时边界条件的判断
if (clearCanvasObj.xStart + clearCanvasObj.width >= outerDomWidth) {
clearCanvasObj.width = outerDomWidth - clearCanvasObj.xStart;
clearCanvasObj.height = outerDomWidth - clearCanvasObj.xStart;
}
if (clearCanvasObj.yStart + clearCanvasObj.height >= outerDomHeight) {
clearCanvasObj.width = outerDomHeight - clearCanvasObj.yStart;
clearCanvasObj.height = outerDomHeight - clearCanvasObj.yStart;
}
if (clearCanvasObj.width 函数里面，你需要注意拖拽的边界条件，一个是方框不能拖到图片所在DOM外的边界；另外一个就是当你鼠标放在小方框所在的区域改变鼠标的样式。方框在拖动的过程中，我们不断重绘方框移动的区域（也就是不断的画上阴影），然后在新的位置调用clearRect函数，重新擦出一个小方框出来。在拖拽或是拉伸的过程中，我们会不断调用produceSmallPic函数，在右边的容器（每个容器都是一个canvas）里面不断根据容器大小重绘出所需的头像。代码如下：
function produceSmallPic(imageURL,left, top, width, height) {
var img = new Image();
img.src = imageURL;
var targetCtx = new Array();
var targetCanvas = null;
img.onload = function() {
portraitGroupsArr.forEach(function(item, index) {
targetCanvas = document.getElementById(item.class);
targetCtx.push(targetCanvas.getContext('2d'));
targetCtx[index].clearRect(0,0, item.width, item.height);
targetCtx[index].drawImage(img, left - clearCanvasObj.left, top - clearCanvasObj.top, width, height, 0, 0 , item.width, item.height);
})
}
}
注意事项
搞定这一切，有些事项得留意。首先，Canvas搞起来就要折腾很多图形所以可能很耗费资源。咱们得想办法优化下代码，减少那些不重要的计算，才能让程序跑得飞快！
二，你知道Canvas是个像素算法，所以在各种设备上显示可能不太一样。咱得好好看看，保证无论在哪种设备上都让大家用着爽！
总结与展望
这个Canvas项目真的太给力了！它不仅能完成各种复杂功能，还让整个过程超好玩儿。虽然过程有点儿小曲折，但是每次解决问题都很有成就感哦～
html2canvas(document.getElementById('imgContainer'), {
onrendered: function(canvas) {
var imageURL = canvasTransToImage(canavs);
...
}
})
function canvasTransToImage(canvas) {
var imageURL = canvas.toDataURL('image/png');
return imageURL;
}
小伙伴们，有试过用Canvas做自己的头像吗？没试过的话，赶紧去试试，保证你会喜欢上这种感觉！要是你已经试过了，那么恭喜你，赶快来交流一下你的心路历程！最后，如果觉得这篇文章对你有点儿启发，别忘了给个赞，顺便分享给身边的朋友们。
评论0