最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
HTML5使用Canvas做一个在线画图程序(支持把画布保存为图像)
时间:2016-01-30 编辑:简简单单 来源:一聚教程网
1,在线画图板的开发
(1)页面加载后,我们取得
在线Demo如下:
css">
--- paint.css ---
body {
background: white;
}
.Toolbar {
float: left;
font-family: 'Trebuchet MS';
font-size: 14px;
font-variant: small-caps;
text-align: center;
background: #F2F7FE;
padding: 10px 15px 3px 10px;
margin-bottom: 1px;
margin-right: 1px;
border: 1px solid #7B899B;
}
.Toolbar button {
padding: 6px;
margin: 7px 2px;
font-variant: normal;
font-size: 12px;
}
.CanvasContainer {
clear: both;
}
canvas {
border: 1px solid #7B899B;
}
img {
padding: 2px;
border: 2px solid #F2F7FE;
}
img:hover {
border: 2px groove #E4F0FE;
background: white;
}
img.Selected {
border: 2px groove #E4F0FE;
}
#savedCopyContainer {
display: none;
}
#savedCopyContainer img {
}
2,将画布保存为图像
(1)调用
(4)数据URL很适合传输图像,除了可以发送到Web服务器在后台保存下来,也可以作为元素的src属性值显示出来。
// 找到预览的 元素标签
var imageCopy = document.getElementById("savedImageCopy");
// 将画布内容在img元素中显示
imageCopy.src = canvas.toDataURL();
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31