这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
见图:
这篇文章主要介绍了使用 html5+javascript 制作的简易画板, 需要的朋友可以参考下
代码如下:
- <!DOCTYPE html>
- <html>
- <meta http-equiv="content-type" Content="text/html;charset=utf-8">
- <head>
- <title>
- 简易画板
- </title>
- <style>
- #eraseImg{ /*橡皮样式*//**/ border:solid; color:gray; border-radius: 118px;
- width: 5px; height: 5px; position: absolute; display: none; } .eraseSeries{
- /*橡皮大小单选按钮组的排列,此div不单独占一行*/ display: inline-block; }
- </style>
- <script src="jquery-1.7.1.js">
- </script>
- <script>
- var c; //获取到的2d画板
- var painting = false; //判断是否正在绘画,即鼠标左键是否长按下去
- var canvas; //画板
- $(function() {
- $(".eraseSeries").hide(); //初始状态单选按钮组隐藏
- canvas = document.getElementById("myCanvas");
- c = canvas.getContext("2d");
- c.lineCap = "round"; //设置笔迹边角,否则笔迹会出现断层
- c.strokeStyle = "black"; //笔迹的颜色
- c.lineWidth = 5; //笔迹的粗细
- $("#color").change(function() { //笔迹颜色发生改变时
- if (eraseFlag == true) //处在擦皮状态
- {
- $("#erase").trigger("click"); //自动触发橡皮的点击事件,以返回到画笔状态
- }
- c.strokeStyle = $(this).val(); //设置画笔状态
- c.lineWidth = $(this).val();
- });
- $("#fontSize").change(function() { //画笔粗细发生改变
- if (eraseFlag == true) //同上
- {
- $("#erase").trigger("click");
- }
- c.lineWidth = $(this).val();
- c.strokeStyle = $("#color").val();
- //eraseFlag=false;
- });
- $(".eraseSeries").click(function() { //橡皮大小发生改变
- var size = $('input[name="eraseSize"]:checked').val(); //获取到橡皮单选按钮组的选中值
- sizeE = size; //将该值传到全局变量上,sizeE需要用来控制橡皮样式的位置
- c.lineWidth = size;
- $("#eraseImg").CSS({
- "width": size + "px",
- "height": size + "px"
- }); //橡皮样式大小发生改变
- });
- $("#erase").toggle(function() { //橡皮按钮的点击翻转事件
- c.save(); //保持上次设置的状态
- eraseFlag = true;
- c.strokeStyle = "white";
- $("#erase").text("画笔"); //改变按钮上的文字
- $(".eraseSeries").show('fast'); //橡皮单选组出现
- // $("#eraseImg").show();
- sizeE = 5;
- },
- function() {
- eraseFlag = false;
- $("#erase").text("橡皮");
- $(".eraseSeries").hide('fast');
- c.restore(); //恢复上次画笔的状态(包括颜色,粗细等)
- });
- //setInterval(paint,2);
- });
- var p_x; //上次鼠标位置
- var p_y;
- var p_x_now; //当前瞬间鼠标位置
- var p_y_now;
- var eraseFlag = false;
- var sizeE; //橡皮大小
- $(document).mousedown(function(e) { //鼠标按下触发事件
- // alert(sizeE);
- p_x = e.clientX; //获取位置,并置为上次鼠标位置
- p_y = e.clientY;
- painting = true; //画笔启动标志
- });
- $(document).mousemove(function(e) { //鼠标移动触发事件
- if (eraseFlag == true && e.clientY > 30) //橡皮处在激活状态,并且鼠标Y的位置大于30,也即鼠标在画板内
- {
- //橡皮图像跟随鼠标而动
- $("#eraseImg").animate({
- left: e.clientX - sizeE + "px",
- top: e.clientY - sizeE + "px"
- },
- 0).show('fast');
- } else {
- $("#eraseImg").hide('fast');
- }
- if (painting == true) //处于画笔激活状态
- {
- //alert(1);
- p_x_now = e.clientX; //当前瞬间的鼠标位置
- p_y_now = e.clientY;
- c.beginPath(); //开始路径
- //曲线是由一段段非常小的直线构成,计算机运算速度很快,这是一种以直线迭代画曲线的方式
- c.moveTo(p_x - 5 - canvas.offsetLeft, p_y - 5 - canvas.offsetTop); //移动到起始点
- c.lineTo(p_x_now - 5 - canvas.offsetLeft, p_y_now - 5 - canvas.offsetTop); //从起始点画直线到终点
- c.stroke();
- c.closePath(); //封闭路径,这个很重要,如果路径不封闭,
- // 那么只要canvas颜色发生改变,所有的之前画过的颜色都发生改变
- p_x = p_x_now; //一次迭代后讲当前的瞬间坐标值赋给上次鼠标坐标值
- p_y = p_y_now;
- }
- });
- $(document).mouseup(function(e) { //鼠标松开触发事件
- painting = false; //冻结画笔
- });
- </script>
- </head>
- <body>
- <div>
- <select id="color">
- <!--画笔颜色-->
- <option class="opt" value="red">
- 红色
- </option>
- <option class="opt" value="yellow">
- 黄色
- </option>
- <option class="opt" value="blue">
- 蓝色
- </option>
- <option class="opt" value="black" selected>
- 黑色
- </option>
- <option class="opt" value="green">
- 绿色
- </option>
- </select>
- <select id="fontSize">
- <!--画笔大小-->
- <option value=5 selected>
- 5
- </option>
- <option value=10>
- 10
- </option>
- <option value=15>
- 15
- </option>
- <option value=20>
- 20
- </option>
- <option value=30>
- 30
- </option>
- </select>
- <button id="erase">
- 擦皮
- </button>
- <!--橡皮按钮-->
- <div class="eraseSeries">
- <!--橡皮大小-->
- <input type="radio" name="eraseSize" value="5" checked/>
- 5
- <input type="radio" name="eraseSize" value="10" />
- 10
- <input type="radio" name="eraseSize" value="15" />
- 15
- <input type="radio" name="eraseSize" value="20" />
- 20
- <input type="radio" name="eraseSize" value="30" />
- 30
- </div>
- </div>
- <!--<button id="btn">btn</button>-->
- <canvas id="myCanvas" width="1420" height="780" style="border: solid">
- </canvas>
- <!--整个画布-->
- <div id="eraseImg">
- <!--橡皮形状-->
- </div>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0422/276224.html