<!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画布实现画图（二）的更多相关文章

  1. HTML5入门十---Canvas画布实现画图（一）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. HTML5入门九---Canvas画布

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. HTML5 中的 canvas 画布（二）

    绘制图片 一.绘制图片 context.drawImage()(即把图片放到canvas里) var image = new Image();  // 先创建图片对象 image.src = '图片的 ...

  4. HTML5 中的 canvas 画布（一）

    ---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...

  5. canvas画布如何画图案例

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. “canvas画布仿window系统自带画图软件"项目的思考

    "canvas画布仿window系统自带画图软件"项目的思考 首先贴上DEMO图,并没有美化效果.对UI有要求的,请自带补脑技术. 思考一 在做项目的过程中,我发现"工具 ...

  7. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  8. 自学HTML5第四节（canvas画布详解）

    canvas画布好像可是说是HTML5的精华了,一定要学好,嗯嗯,绚丽的东西就要从基础的开始.... 先看看啥玩意叫做canvas 什么是 Canvas? HTML5 的 canvas 元素使用 Ja ...

  9. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

随机推荐

  1. hibernate 知识梳理

    一.hibernate背景介绍: 作者: Gavin King 分hibernate ORM(for relation db),OGM(for nosql db),hearch,validator,t ...

  2. git服务器简易搭建法

    受尽svn各种折磨的小伙伴都听说过git. 但是网上一搜索, 本来打算跟svn一样. 下一个服务器, 装下就可以开始用了. 没想到啊, 没想到. 居然需要Linux天赋点… 好吧, 拜鸟哥门下把Lin ...

  3. apache http server 局域网无法访问

    apache 本地配置完成测试成功,但局域网内无法访问. 1.主要是本本地的防火墙设置有关,修改防火墙设置就成了 控制面板->系统和安全->Windows 防火墙->允许程序通过Wi ...

  4. css透明(支持各浏览器)

    opacity: 0.4;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); -ms-filter: "progid:D ...

  5. WPF编译时提示“...不包含适合于入口点的静态‘Main’方法 ...”

    今天看了一下wpf的Application类方面的知识,一个windows应用程序由一个Application类的实例表示,该类跟踪在应用程序中打开的所有窗口,决定何时关闭应用程序(属性 Shutdo ...

  6. Jquer Ajax xmlhttp请求成功了，为什么一直在error函数里面

    转载自http://www.cnblogs.com/sky_Great/archive/2013/01/18/2866861.html 并进行整理: 今天遇到了一个极其奇怪的问题,用各种工具检查都能看 ...

  7. mysql 连接语句

    在 SELECT 语句中,如果 FROM 子句引用了多个表源或视图,可以使用 JOIN 指示指定的联接操作应在指定的表源或视图之间执行. 一.交叉联接:CROSS JOIN 交叉联接将执行一个叉积(迪 ...

  8. 【js】undefined

    alert(a); function name(parameters) { alert(parameters); } var a; name(a); ---输出结果--- underfind unde ...

  9. Ubuntu 下为 Idea 创建启动图标.

    默认情况下,ubuntu将自动安装的软件快捷方式保存在/usr/share/applications目录下,如果我们要创建桌面快捷方式,需要在该目录下创建一个名为“Idea.desktop”的文件.通 ...

  10. aspnet_regiis.exe 的用法

    使用aspnet_regiis.exe注册.NET Framework 重新安装IIS以后,需要用aspnet_regiis.exe来注册.NET Framework, 如下: C:\WINDOWS\ ...