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> & ...
随机推荐
- Nginx+Keepalived实现高可用站点
Keepalived是一个基于VRRP协议来实现的服务高可用方案,可以利用其来避免IP单点故障,类似的工具还有heartbeat. corosync.pacemaker.但是它一般不会单独出现,而是与 ...
- composer安装yii2或者laravel报错
大概的信息就是提示让登陆github,然后就报错了 Could not fetch https://api.github.com/authorizations, enter your GitHub c ...
- EF-Code First 入门
本文程序基于VS2015.EF6.1,本文不做过多深入讨论,只是个入门. EF 就是微软的 EntityFramework,主要分为 DB First,Model First,Code First.之 ...
- iOS多线程编程Part 1/3 - NSThread & Run Loop
前言 多线程的价值无需赘述,对于App性能和用户体验都有着至关重要的意义,在iOS开发中,Apple提供了不同的技术支持多线程编程,除了跨平台的pthread之外,还提供了NSThread.NSOpe ...
- IOS开发之──应用之间调用（1）
iphone应用之间调用步骤: 1)在plist文件中,注册对外接口 在xcode group&files 里面,展开 resources选择<app>info.plist 鼠标右 ...
- google api , using a refresh token to get the access token
router.get('/refresh',function(req,res){ oauth2Client.credentials = { refresh_token: '1/RqVyL7yLBxws ...
- 【转载】IE6 PNG透明终极解决方案（打造W3Cfuns-IE6PNG最强帖）
原文地址:http://www.w3cfuns.com/thread-297-1-1.html 本文版权归W3Cfuns.com所有,转载需在文章页面明显位置以链接的方式给出原文链接,否则W3Cfun ...
- ASP.NET Web - 开篇
ASP.NET运行库 服务器系统上需要ASP.NET运行库.如果系统上有IIS,就会在安装.NET Framework时为服务器配置ASP.NET运行库.开发过程中,不需要IIS,因为VS发布了自己的 ...
- iOS性能调优之Analyze静态分析
之前遇到一个同事写的 陈年老工程,需要尽快的时间修改里面的东西,急用,让我帮忙.那就帮着看看. 而Analyze这个工具 真是好用. 工程存在严重的内存泄漏. 如果不解决 很容易就会出现崩溃等现象 ...
- 邻结矩阵的建立和 BFS,DFS;;
邻结矩阵比较简单,, 它的BFS,DFS, 两种遍历也比较简单,一个用队列, 一个用数组即可!!!但是邻接矩阵极其浪费空间,尤其是当它是一个稀疏矩阵的时候!!!-------------------- ...