<!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. 封装鼠标滚轮事件_mousewheel

    function mousewheel(obj,fn){ obj.onmousewheel===null ? obj.onmousewheel=fun : obj.addEventListener(' ...

  2. [转]init.d解析

    本文为转载,放在这里以备忘. init.d指的是/etc/rc.d/init.d目录.本文包括3部分内容1. Linux的引导过程2. 运行级别3. /etc/rc.d/ 与/etc/rc.d/ini ...

  3. CentOS服务器Http压力测试之ab

    ab的全称是Apache Bench,是Apache自带的网络压力测试工具,相比于LR.JMeter,是我所知道的 Http 压力测试工具中最简单.最通用的. ab命令对发出负载的计算机要求很低,不会 ...

  4. [转] c和python利用setsockopt获得端口重用

    假如端口被socket使用过,并且利用socket.close()来关闭连接,但此时端口还没有释放,要经过一个TIME_WAIT的过程之后才能使用.为了实现端口的马上复用,可以选择setsockopt ...

  5. ASP.NET MVC +EasyUI 权限设计(一)开篇

    在前一段时间中,老魏的确非常的忙碌,Blog基本上没有更新了,非常的抱歉,那么在后面的时间中,老魏会尽量的抽时间来写的,可能时间上就不太富裕了.今天开始呢,老魏会和大家分享一下关于权限设计的有关文章, ...

  6. matlab实现的嵌套乘法、高精度、二分法

    嵌套乘法的计算: \[ P(x) = 1 - x + x^2 - x^3 + ...+ x ^ {98} - x^{99} \] function y = nest( d, c, x, b ) if ...

  7. LintCode-Majority Number

    Given an array of integers, the majority number is the number that occurs more than half of the size ...

  8. Scrum10-22

    Time:2013-10-22 Author:居玉皓 Things we have done since yesterday's meeting: 在今天的Scrum中,STORY1 开发前期准备工作 ...

  9. 关于MDK中:RO-data、RW-data、ZI-data

    最近在LPC2109上调试ENC28J60,协议栈使用的是UIP,刚开始用的telnet服务,能够正常编译运行.然后换成webserver提示: enc28j60.axf: Error: L6406E ...

  10. 给定一颗二叉搜索树，请找出其中的第k小的结点。例如， 5 / \ 3 7 /\ /\ 2 4 6 8 中，按结点数值大小顺序第三个结点的值为4。

    // ConsoleApplication2.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include "stdafx.h ...