HTML5入门十一---Canvas画布实现画图（二）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
canvas{
border: 1px dashed black;
}
.btnStyle{ }
</style>
<script>
var penColor = "red";
var penSize = "";
var mouseX;//鼠标x位置
var mouseY;//鼠标y位置
var obj;
function getPen(string){
if(string == '1')
penColor = "red";
else if(string == '2')
penColor = "blue";
else if(string == '3')
penColor = "green";
}
function getPoint(string){
if(string == '4')
penSize = 3;
else if(string == '5')
penSize = 6;
else if(string == '6')
penSize = 8;
}
function draw()
{
obj = document.getElementById("myCanvas")
var context = obj.getContext("2d");
context.lineWidth = penSize;
context.beginPath();
context.moveTo(mouseX,mouseY);
mouseX = event.clientX;//鼠标x位置
mouseY = event.clientY;//鼠标y位置
//alert(mouseX);
//alert(mouseY);
context.strokeStyle = penColor;
context.lineCap = "round";
context.fillStyle = "blanchedalmond";
context.fill();
context.lineTo(mouseX,mouseY);
//context.lineTo(10,10);
context.closePath();
context.stroke();
}
function updatePos()
{
mouseX = event.clientX;//鼠标x位置
mouseY = event.clientY;//鼠标y位置
} </script>
</head>
<body>
<div>
<form name="mypaint">
<table align="center" border=0 cellspacing="0" width="800px" height="400px" cellpadding="0">
<tr align="center">
<td><input onclick="getPen('1')" id="redPen" type="button" value="" style="border:0;width:50px;height:50px;background:url(./img/pen_red.gif) no-repeat;"/></td>
<td rowspan=7>
<canvas id="myCanvas" onmousedown="draw()" onmouseup="updatePos()" width="600px" height="400px">
</canvas>
</td></tr>
<tr align="center"><td><input onclick="getPen('2')" id="bluePen" type="button" value="" style="border:0;width:50px;height:50px;background:url(./img/pen_blue.gif) no-repeat;"/></td></tr>
<tr align="center"><td><input onclick="getPen('3')" id="greenPen" type="button" value="" style="border:0;width:50px;height:50px;background:url(./img/pen_green.gif) no-repeat;"/></td></tr>
<tr align="center"><td><input onclick="getPoint('4')" id="thinPoint" type="button" value="" style="border:0;width:50px;height:50px;background:url(./img/pen_thin.gif) no-repeat;"/></td></tr>
<tr align="center"><td><input onclick="getPoint('5')" id="mediumPoint" type="button" value="" style="border:0;width:50px;height:50px;background:url(./img/pen_medium.gif) no-repeat;"/></td></tr>
<tr align="center"><td><input onclick="getPoint('6')" id="thickPoint" type="button" value="" style="border:0;width:50px;height:50px;background:url(./img/pen_thick.gif) no-repeat;"/></td></tr>
<tr align="center"><td><input onclick="clear()" id="thickPoint" type="button" value="保存" />
<input onclick="clear()" id="thickPoint" type="button" value="清空" />
</td></tr>
</table>
</form>
</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 画布（二）
绘制图片 一.绘制图片 context.drawImage()(即把图片放到canvas里) var image = new Image(); // 先创建图片对象 image.src = '图片的 ...
- HTML5 中的 canvas 画布（一）
---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...
- canvas画布如何画图案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- “canvas画布仿window系统自带画图软件"项目的思考
"canvas画布仿window系统自带画图软件"项目的思考 首先贴上DEMO图,并没有美化效果.对UI有要求的,请自带补脑技术. 思考一 在做项目的过程中,我发现"工具 ...
- 用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 ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
随机推荐
- MSSQL优化之——查看语句执行情况
MSSQL优化之——查看语句执行情况 在写SQL语句时,必须知道语句的执行情况才能对此作出优化.了解SQL语句的执行情况是每个写程序的人必不可少缺的能力.下面是对查询语句执行情况的方法介绍. 一.设置 ...
- 【Delphi】最小化事件捕捉
添加一个ApplicationEvents组件在窗体,然后处理其OnMinimize事件和OnRestore事件即可.
- logstash 统计告警
在实际的项目中需要对线上日志做实时分析跟统计,这一套方案可以用现有的ELK(ElasticSearch, Logstash, Kibana)方案既可以满足,关于这个方案的具体的步骤可以参考网上的解决方 ...
- C#中窗体的互相访问
1.在父窗体中构造子窗体对象时,将父窗体传递过去: 如:FrmSub frm=new FrmSub(this);//this代表父窗体 2.将父窗体中要访问的变量和方法修改为public 3.在子窗体 ...
- N个顶点构成多边形的面积
Input 输入数据包含多个测试实例,每个测试实例占一行,每行的开始是一个整数n(3<=n<=100),它表示多边形的边数(当然也是顶点数),然后是按照逆时针顺序给出的n个顶点的坐标(x1 ...
- 管理口令(P):[INS-30001] ADMIN口令为空之Oracle安装
在安装oracle database11g 发行版的时候出现下面这个问题. 无论怎么输入密码都提示有问题,都输入得鬼火了!去百度了一下,果然有命名规则的 规则如下:小写字母+数字+大写字母
- return的用法
1.一般的就是用在有返回值的方法中,用来返回方法指定类型的值,同时结束方法执行: 2.可以用在返回值为void的方法中,用来终止方法运行:
- 屏蔽ios7中某个页面的默认手势滑回返回
- (void)viewWillDisappear:(BOOL)animated {[super viewWillDisappear:YES];self.navigationController.in ...
- Start my cnBlogs
Compared to CSDN blog, althought it's my first time to use CNBlog,i felt it makes me more comfortabl ...
- ComboTree使用
1.参考资料 1.http://www.jeasyui.com/documentation/combotree.php 2.http://blog.csdn.net/woshichunchun/a ...