HTML5入门十---Canvas画布实现画图（一）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background: white;
}
.ToolBar{
float: left;
font-family: "微软雅黑";
font-size: 14px;
font-variant: small-caps;
text-align: center;
background: #F2F7EE;
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;
}
canvas{
border: 1px solid #7B899B;
}
img{
padding: 2px;
border: 2px solid #F2F7EE;
}
img:hover{/*当鼠标悬停在图片上*/
border: 2px groove #E4F0FE;
background: white;
}
img.Selected{
border: 2px groove #E4F0FE;
}
#saveCopyContainer{
display: none;
}
#saveCopyContainer img{
width: 250px;
height: 150px;
}
.CanvasContainer{
}
</style>
<script type="text/javascript">
var canvas;
var context;
var isDrawing=false;
window.onload=function(){
canvas = document.getElementById("drawingCanvas");
context = canvas.getContext("2d");
canvas.onmousedown = startDrawing;
canvas.onmouseup = stopDrawing;
canvas.onmouseout = stopDrawing;
canvas.onmousemove = draw;
}
function startDrawing(e)
{
isDrawing = true;
context.beginPath();
context.moveTo(e.pageX-canvas.offsetLeft,e.pageY-canvas.offsetTop);
}
function stopDrawing()
{
isDrawing=false;
}
function draw(e)
{
if(isDrawing)
{
var x = e.pageX-canvas.offsetLeft;
var y = e.pageY-canvas.offsetTop;
context.lineTo(x,y);
context.stroke();
}
}
function changeColor(color,imgEle)
{
context.strokeStyle = color;
imgEle.className = "Selected";
}
function changethickness(thickness,imgEle)
{
context.lineWidth = thickness;
imgEle.className = "Selected";
}
function clearCanvas(){
context.clearRect(0,0,canvas.width,canvas.height)
}
function saveCanvas(){
var imageCopy = document.getElementById("saveImageCopy");
imageCopy.src = canvas.toDataURL();
var imageContainer = document.getElementById("saveCopyContainer");
imageContainer.style.display = "block";
}
</script>
</head>
<body>
<div class="Toolbar">
<img id="redPen" src="img/pen_red.gif" alt="Red Pen"
onclick="changeColor('rgb(212,21,29)',this)"/>
<img id="greenPen" src="img/pen_green.gif" alt="Green Pen"
onclick="changeColor('rgb(131,190,61)',this)"/>
<img id="bluePen" src="img/pen_blue.gif" alt="Blue Pen"
onclick="changeColor('rgb(0,86,166)',this)"/>
</div>
<div class="Toolbar">
<img src="img/pen_thin.gif" alt="Thin Pen"
onclick="changethickness(1,this)"/>
<img src="img/pen_medium.gif" alt="Medium Pen"
onclick="changethickness(5,this)"/>
<img src="img/pen_thick.gif" alt="Thick Pen"
onclick="changethickness(10,this)"/>
</div>
<div>
<canvas id="drawingCanvas" width="500" height="500"></canvas>
</div>
<div>
<button onclick="saveCanvas()">Save</button>
<button onclick="clearCanvas()">Clean</button>
<div id="saveCopyContainer">
<img id="saveImageCopy"/><br/>
</div>
</div>
</body>
</html>
素材：
HTML5入门十---Canvas画布实现画图（一）的更多相关文章
- HTML5入门十一---Canvas画布实现画图（二）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5入门九---Canvas画布
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5 中的 canvas 画布（一）
---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...
- HTML5 中的 canvas 画布（二）
绘制图片 一.绘制图片 context.drawImage()(即把图片放到canvas里) var image = new Image(); // 先创建图片对象 image.src = '图片的 ...
- canvas画布如何画图案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- 自学HTML5第四节（canvas画布详解）
canvas画布好像可是说是HTML5的精华了,一定要学好,嗯嗯,绚丽的东西就要从基础的开始.... 先看看啥玩意叫做canvas 什么是 Canvas? HTML5 的 canvas 元素使用 Ja ...
- “canvas画布仿window系统自带画图软件"项目的思考
"canvas画布仿window系统自带画图软件"项目的思考 首先贴上DEMO图,并没有美化效果.对UI有要求的,请自带补脑技术. 思考一 在做项目的过程中,我发现"工具 ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
随机推荐
- java 反射的踩的一个坑
今天工作的时候用到了一个反射.其业务简单描述为:系统启动时将需要定时调用的方法签名保存到数据库中,开启线程定时从数据库中读取对应的方法签名,通过反射生成实例后调用方法.完成一定的定时任务. 写到的方法 ...
- php 获取数组第一个值的方法分享
以下是对使用php实现获取数组第一个值的方法进行了详细的分析介绍,需要的朋友可以过来参考下 reset (PHP 3, PHP 4, PHP 5)reset -- 将数组的内部指针指向第一个单元 说明 ...
- ORA-00054
系统版本: [root@yoon ~]# more /etc/oracle-releaseOracle Linux Server release 5.7 数据库版本: Oracle Database ...
- Ubuntu 14.04安装Chromium浏览器并添加Flash插件Pepper Flash Player
安装方法Ubuntu 14.04及衍生版本用户命令: 因为默认库里面有Chromium和Pepper Flash Player,安装非常容易,打开终端,输入以下命令: sudo apt-get upd ...
- mysql5.5 Replication 主从同步
mysql5.5 Replication 主从同步 ------------------[主]------------------[mysqld]server-id=1 log-bin=mysql-b ...
- Excel快捷键
Ctrl 组合快捷键 关键字 说明 Ctrl+PgDn 在工作表选项卡之间从左至右进行切换. Ctrl+PgUp 在工作表选项卡之间从右至左进行切换. Ctrl+Shift+& 将轮廓边框应用 ...
- OC面向对象封装
面向对象语言的三大特性:封装.继承.多态 封装:不暴露自己类的内部的属性,提高自己的数据的安全性:就像一个接线盒一样,内部结构看不到,只有外部的接口提供给我们使用,这样既安全又美观:在代码方面就是结构 ...
- iOS 10 版本适配问题收集-b
随着iOS10发布的临近,大家的App都需要适配iOS10,下面是我总结的一些关于iOS10适配方面的问题,如果有错误,欢迎指出. 1.系统判断方法失效: 在你的项目中,当需要判断系统版本的话,不要使 ...
- JDBC 学习笔记（三）—— 数据源(数据库连接池)：DBCP数据源、C3P0 数据源以及自定义数据源技术
本文目录: 1.应用程序直接获取连接的缺点(图解) 2.使用数据库连接池优化程序性能(图解) 3.可扩展增强某个类方法的功能的三种方式 4.自定 ...
- Mysql几种索引类型的区别及适用情况
如大家所知道的,Mysql目前主要有以下几种索引类型:FULLTEXT,HASH,BTREE,RTREE. 那么,这几种索引有什么功能和性能上的不同呢? FULLTEXT 即为全文索引,目前只有MyI ...