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> & ...
随机推荐
- 在项目中 background transiton 带来的"便利"与“坑”
本文就两个例子跟大家分享一下background-image与background-size的渐变(transition)所带来的方便与“深坑” 首选,说说这东西好的地方,有时候在做PC项目的时候,可 ...
- 【转】Python的XML-RPC简介
编写客户端提交数据到服务器处理是程序员最常碰到的几个问题之一.各种不同的语言对此都有相应的解决方案.比如Unix下,C程序员们可以用SUNRPC,Java程序员则使用RMI来处理.大多数语言还都可以使 ...
- 表达式语言之ongl表达式
OGNL的全称是Object Graph Navigation Language(对象图导航语言),它是一种强大的表达式语言,让你通过简单一致的表达式语法来读取和设置Java对象的属性值,调用对象的方 ...
- python之函数嵌套
python很多特性与JavaScript是相似甚至相同的: 1. 无类型 2. 函数亦对象 .... 自然: python也允许函数嵌套, 这与JavaScript中函数闭包的作用一样....
- redis 界面软件使用
ubuntu 下下载安装包 sudo dpkg -i redis-desktop-manager_0.8.3-120_amd64.deb//安装 redis-desktop-manager //启动
- iOS 23 种设计模式
设计模式主要分三个类型:创建型.结构型和行为型. 其中创建型有: 一.Singleton,单例模式:保证一个类只有一个实例,并提供一个访问它的全局访问点 二.Abstract Factory,抽象工厂 ...
- 关于表 datatable的条件查询
关于表 datatable的条件查询 从数据库中获得一个datatable dt .里面有很多的死的数据.然后,我就是要在这个表中来按条件查询,例如 dt中有个列叫"palte", ...
- webview加载本地html
//webView.loadUrl("file:///android_asset/index.html"); 加载assets目录中含有的index.html webView.l ...
- lamada 表达式之神奇的groupby
少说话多干活 先定义一个测试用的实体,接下来会用字段Name进行分组的 public class TestToRun { public string Name { get; set; }//名称 pu ...
- vim插件介绍
代码补全 http://blog.sina.com.cn/s/blog_a6559d920101acv3.html这个牛逼.************************************** ...