2016/1/15代码

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body margin = "0px">











//制作画板
<div align="center">

<canvas id=" mycanvas" width="800px" height="800px" style="border: 2px solid salmon"></canvas>
<div class= "control-ops">
<button type="button" class="btn btn-primary" οnclick="javascript:clearArea();return false;">清空画布</button>
line width:<select id="selWidth">
<option value="1">1</option>
<option value="3">2</option>
<option value="5">3</option>
<option value="7">4</option>
<option value="9">9</option>
<option value="11" selected = "selected">11</option>
</select>
color:<select id = "selColor">
<option value="red">red</option>
<option value="blue">blue</option>
<option value="pink">pink</option>
<option value="yellow">yellow</option>
<option value="green">green</option>
<option value="grey">grey</option>
</select>
</div>
</div>
</p>
<script type="text/javascript">
var mousePressed = false;
var lastX,lastY;
var ctx;
function InitThis(){
ctx.document.getElementById("mycanvas").getContext("2d");
}
$('#mycanvas').mousedown(function(e){
mousePressed = true;
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top,false);
});
$('#mycanvas').mousemove(function(e){
if(mousePressed){
Draw(e.pageX - $(this).offset.left, e.pageY - $(this).offset().top,true);
}
});
$('#mycanvas').mouseup(function(e){}
mousePressed = false;
}
);
$('#mycanvas').mouseleave(function(e)
mousePressed = false;
);
function (x,y,isDown){
if(isDown){
ctx.beginPath();
ctx.strokeStyle = $('#selColor').val();
ctx.lineWidth = $('selWidth').val();
ctx.linejoin = "round";
ctx.moveTo(lastX,lastY);
ctx.lineTo(x,y);
ctx.closePath();
ctx.stroke();
}
lastX = x,lastY = y;
}
function clearArea(){
// Use the identity matrix while clearing the canvas
ctx.setTransform(1,0,0,1,0,0);
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
}
// var JSONobject = {
// "name":"Bill Gates",
// "address":"Fifth Avenue New Yourk 666",
// "age":21,
// "phone":"18408234562";
// }
// document.getElementById("jname").innerHTML = JSONobject.name;
// document.getElementById("jaddre").innerHTML = JSONobject.address;
// document.getElementById("age").innerHTML = JSONobject.age;
// document.getElementById("jphone").innerHTML = JSONobject.phone;
// var employees = [
// {"firstName":"Bill","lastName":"Gates"},
// {"firstName":"first","lastName":"Snoopy"},
// {"firstName":"Micheal","lastName":"Kates"}
// ];
// employees[1].firstName = "jobs";
// document.getElementById("fname").innerHTML = employees[1].firstName;
// var txt = '{ "employees" + [' +
// '{"firstName":"Bill","lastName":"Gates"}'+
// '{"firstName":"ILOVE","lastName":"Snoopy"}'+
// '{"firstName":"Tome","lastName":"mike"}'
// ']
// }';
// var obj = eval("(" + txt + ")");
// document.getElementById("fname").innerHTML = obj.employees[1].firstName;
// document.getElementById("lname").innerHTML = obj.employees[2].lastName;

</script>
</body>
</html>

转载于:https://www.cnblogs.com/whatcanido/p/5134559.html

2016/1/15代码相关推荐

【iOS工具】rvm、Ruby环境和CocoaPods安装使用及相关报错问题解决（2016 12 15 更新）...
〇.前言在iOS开发中 [CocoaPods](https://github.com/CocoaPods/CocoaPods) 作为库依赖管理工具就是一把利器. 有了 CocoaPods 则无需再通 ...
Android Retrofit 2.0使用——转载吴小龙同学http://wuxiaolong.me/2016/01/15/retrofit/
这几天学习Retrofit 看到一篇非常好的文章如下: 原网址为:http://wuxiaolong.me/2016/01/15/retrofit/感谢吴小龙同学的默默奉献. 实例带你了解Retrof ...
Prettier 1.15代码格式化工具新增Angular和Vue.js支持
Prettier 1.15代码格式化工具新增HTML.Vue.js.Angular.MDX支持以及多项语法优化和改进. 对于Angular和Vue,Prettier现在可以格式化这些扩展HTML的框架 ...
电大计算机专业英语形成性考试,2016电大15版英语4形成性考核册作业答案.doc
2016电大15版英语4形成性考核册作业答案 06版英语4形成性考核册作业答案形考册第一次作业答案第一部分:交际用语(每题2分,共10分)1-5小题:阅读下面的小对话,从A.B.C.D四个选项中选出 ...
【NOIP模拟题】【DP】【同余最短路】【暴力剪枝】2016.11.15 第二题小L的牛栏题解
小L的牛栏 [题目描述] 小L通过泥萌的帮助,成功解决了二叉树的修改问题,并因此写了一篇论文, 成功报送了叉院(羡慕不?).勤奋又勤思的他在研究生时期成功转系,考入了北京大学光华管理学院!毕业后,凭着 ...
Android新手入门2016（15）--Gallery画廊
本文来自肥宝传说之路,引用必须注明出处! Gallery是Android查看图片的一个工具,用户使用非常方便. 可以通过左右滑动来查看不同的图片代码比较简单,但是还是搞了一整天,因为碰到了一些问题. ...
2016.08.15
有些事是这个样子的,看起来简单,上手也容易,可当你慢慢的深入,才发觉事情根本不像当初看上去那么简单,就比如说,编程. 不讳言的说,目前挺喜欢码代码这件事的,只不过目前能力有限,基本都还是模仿,从别人的 ...
转载：2016.3.15 回忆录
问题一: 初次见面,先手写一段二分查找的算法吧,假定数组是由大到小排序的! 答: 二分查找,别名折半查找.其思想很简单,标准写法如下: //有序数组递减排列 int binarySearch(int* ...
【NOIP模拟题】【DP】【LIS】【中缀表达式】2016.11.15 第一题小L的二叉树题解
小L的二叉树小L的二叉树题目背景勤奋又善于思考的小L接触了信息学竞赛,开始的学习十分顺利.但是,小L对数据结构的掌握实在十分渣渣. 所以,小L当时卡在了二叉树. [题目描述] 在计算机科学中,二 ...

2016/1/15代码

2016/1/15代码相关推荐

最新文章

热门文章