<!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. 一款jquery编写图文下拉二级导航菜单特效

    一款jquery编写图文下拉二级导航菜单特效,效果非常简洁大气,很不错的一款jquery导航菜单特效. 这款jquery特效适用于很多的个人和门户网站. 适用浏览器:IE8.360.FireFox.C ...

  2. Redis 三：存储类型之字符串

    .赋值单个: [赋值多个:mset a b c ] .取值单个: get a [取值多个:mget a b c] .数字递增 incr a 在a的基础上+,那就是返回101 如果预先的值为0,那么返回 ...

  3. 【F#】 入门代码

    找下感觉: 语法和go 如出一辙, 都是erlang派的语言 在 vs 中我没有找到自动缩进的快捷键 github上的F#代码也相对较少 // 在 http://fsharp.org 上了解有关 F# ...

  4. TypeError: Object #<IncomingMessage> has no method 'flash'

    JavaScript相关代码: router.post('/reg', function(req, res) { //检验用户两次输入的口令是否一致 if (req.body['password-re ...

  5. beego 0.9.0 中智能路由AutoRouter的使用方法及源码解读

    了解beego的开发者肯定知道,beego的路由设计来源于sinatra,原来是不支持自动路由的,每一个路由都要自己配置的,如: type MainController struct { beego. ...

  6. Careercup - Facebook面试题 - 5671785349513216

    2014-05-02 01:05 题目链接 原题: bool anaStrStr (string needle, string haystack) { } Write a function that ...

  7. Ajax ContentType 列表

    ".*"="application/octet-stream" ".001"="application/x-001" & ...

  8. 不同的source control下配置DiffMerge

    TFS: 1. 打开Option -> Source Control -> Visual Studio TFS -> Configure User Tools; 2. 添加 .*, ...

  9. 使用maven多模块来构建系统时，spring初始化报错的问题

    最近在实验maven结构的maven工程时,碰到一个问题,springbean总是初始化失败: Related cause: org.springframework.beans.factory.Uns ...

  10. spring配置事务

    一.配置JDBC事务处理机制 <!-- 配置Hibernate事务处理 --> <bean id="transactionManager" class=" ...