CSS3|Html5 网站首页 CSS3|Html5

html5在线画板以及canvas的图片加载

发布时间：2015-06-10 20:10:11编辑：雪饮阅读（）

html5在线画板的所有功能都实现了，只是只是在功能与功能之间有逻辑交错，如果真有心将它做到完美，只需要处理下逻辑即可。还有就是对于三角形的绘制时会在画笔笔触变粗时有下面的bug：

个人博客.png

真正用心的你已经会把这个bug处理的更好的，我相信每个人的潜能。

下面是效果预览：

个人博客.png

下载该源码点击这里：html5在线画板.rar

接着看看canvas中如何加载图片：

<!DOCTYPE HTML>

<html>

<body>

Your browser does not support the canvas element.

</canvas>

</form>

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

var img=new Image()

img.src="2.jpg";

img.onload = function () //确保图片已经加载完毕

{

cxt.drawImage(img,0,0);

}

var imginfo=c.toDataURL();

var imgcontent=imginfo.substring(22);

alert(imginfo);

document.getElementById("wbqy").innerHTML=imgcontent;

</script>

</body>

</html>

上面的案例不仅仅加载图片并且获取canvas画布的datauri数据，只是图片虽然加载了，但canvas的datauri并没有取得图片的数据，下载该源码点击这里：html5canvas图片加载.rar

关键字词：在线画板,canvas图片加载,个人博客