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> & ...
随机推荐
- SQL Server中timestamp（时间戳）
SQL Server timestamp 数据类型与时间和日期无关.SQL Server timestamp 是二进制数字,它表明数据库中数据修改发生的相对顺序.实现 timestamp 数据类型最初 ...
- 所有外包项目威客网站列表----来自程序员接私活网qxj.me
猪八戒 http://www.zhubajie.com/ 有佣金,建议别去坑死了 csto http://www.csto.com/ 开源中国众包 https://zb.osch ...
- 【PHP】phpcms 关联连接修复
function _keylinks($txt, $replacenum = '',$link_mode = 1) { $keywords = $this->data['keywords']; ...
- sql拆分查询
有这样一个需求: 临时表sql: create table #AA ( ID int, Name nvarchar(20) ) insert #AA select 1,'苏州/上海/温州' union ...
- JDBC 基本操作： ＣＲＵＤ
Jdbc中的statement对象用于向数据库发送SQL语句,想完成对数据库的增删改查,只需要通过这个对象向数据库发送增删改查语句即可. Statement对象的executeUpdate方法,用于向 ...
- git，repo学习
Repo:就是一组git命令的集合,repo init 下载一个分支. repo start 文件名 --all本地传建的另一个代码分支,用于备份作用. 比如:repo start zhao --al ...
- Windows程序消息机制浅析
1.消息 消息是由MSG结构体来表示的.如下: typedef struct tagMSG { HWND hwnd; UINT message; WPARAM wParam; LPARAM lPar ...
- 【转】java获取当前路径的几种方法
1.利用System.getProperty()函数获取当前路径: System.out.println(System.getProperty("user.dir"));//use ...
- python学习小结6：模块
模块:在Python中有一个概念叫做模块(module),简单地说,模块就是一个保存了Python代码的文件. 模块能定义函数,类和变量,模块里也能包含可执行的代码. ...
- ascx aspx ashx asmx 文件的作用
ascx aspx ashx asmx 文件的作用 ascx: Ascx 是给予Web的用户控件(UserControl),一般是用来重用的,不能直接被访问只能插入aspx页面呈现.头部文件<% ...