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> & ...
随机推荐
- ThoughtWorks FizzBuzzWhizz 代码实现
当时拉钩网ThoughtWorks出了一道面试题(https://www.jinshuju.net/f/EGQL3D),本人用PHP实现了一下,当时忘记了把代码分享出来,今天特来补上. FizzBuz ...
- 使用jQuery获取GridView的数据行的数量
一个同事在群里抛出了上述的问题,另一个同事给出了答案,试了一下,还不错.贴出代码和效果图: <html xmlns="http://www.w3.org/1999/xhtml" ...
- 在Java中执行js代码
在某些特定场景下,我们需要用Java来执行Js代码(如模拟登录时,密码被JS加密了的情况),操作如下: ScriptEngineManager mgr = new ScriptEngineManage ...
- 使用Azure portal Create Virtual Machine
使用简单快速的方式穿件的Virtual Machine 这个步骤隐藏的了很多步骤,例如的创建的云服务(Cloud Service) 创建存储(Storage) 存储名为系统自动产生 可以通过存储看到含 ...
- Windows Server 2008 HPC 版本介绍以及的Pack
最近接触了下 这个比较少见的 Windows Server版本 Windows Server 2008 HPC 微软官方的介绍 http://www.microsoft.com/china/hpc/ ...
- MinGW-64 安装
一.在mingw-w64官网下载mingw-w64在线安装包 二.点击mingw-w64进行安装,选择: Version:选最新版本 我这个是4.9.2 Architecture:x86_64 (64 ...
- 幻灯slider
<style> .focusBox { position: relative; width: 340px; height: 240px; overflow: hidden; font: 1 ...
- VS2013中设置大小写的快捷键
1.我们在定义头文件时,通常需要定义: #ifndef _MainMenu_H_#define _MainMenu_H_ your code... #endif 我们需要将头文件名设置为大写的: ...
- Java 8 VM GC Tunning Guide Charter 6
第六章 并行GC The Parallel Collector The parallel collector (also referred to here as the throughput coll ...
- Ubuntu 常用软件安装方法
macubuntu 安裝方法: $wget https://github.com/downloads/ChinaLuo/Mac_Ubuntu/Mac_Ubuntu-12.04.tar.gz -O /t ...