Canvas画板

时间：2022-10-21 22:33:57

aaarticlea/png;base64,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" alt="" />

1、页面元素

<div class="row">

    <div>

        <p>笔触颜色</p>

        <ul class="strokeStyle">

            <li style="background-color: red"></li>

            <li style="background-color: blue"></li>

            <li style="background-color: orange"></li>

        </ul>

    </div>

    <div>

        <p>笔触粗细</p>

        <ul class="lineWidth">

            <li>

                <div style="height: 2px"></div>

            </li>

            <li>

                <div style="height: 4px"></div>

            </li>

            <li>

                <div style="height: 6px"></div>

            </li>

        </ul>

    </div>

    <div>

        <button type="button" id="clearrect">橡皮擦</button>

    </div>

</div>

<canvas id="_canvas">

</canvas>

2、脚本实现

<!--设置笔触-->

<script>

    $(function () {

        //设置笔触颜色

        $(".strokeStyle li").click(function () {

            var style = $(this).css("background-color");

            var context = canvas_.getContext("2d");

            context.strokeStyle = style;

        });

        //设置笔触颜色

        $(".lineWidth li").click(function () {

            var Width = $(this).children("div").css("height");

            var context = canvas_.getContext("2d");

            context.lineWidth = Width.replace("px", "");

        });

    })

</script>

<script type="text/javascript">

    var canvas_ = document.getElementById("_canvas");

    //全屏

    canvas_.setAttribute("width", screen.width);

    canvas_.setAttribute("height", screen.height);

    var context = canvas_.getContext("2d");

    context.strokeStyle = "red";//设置笔触颜色

    context.lineWidth = 4;//设置线条粗细

    var array_paint = [];

    var current_y = 0;

    var current_x = 0;

    //判断鼠标是否按下

    var m_down = false;

    //画线

    function paint() {

        context.beginPath();//清空子路径

        context.moveTo(array_paint[0][0], array_paint[0][1]);//将画笔移到x0,y0处

        if (array_paint.length == 1)

            context.lineTo(array_paint[0][0] + 1, array_paint[0][1] + 1);//从画笔位置到x1,y1画一条线

        else {

            var i = 1;

            for (i in array_paint) {

                context.lineTo(array_paint[i][0], array_paint[i][1]);

                context.moveTo(array_paint[i][0], array_paint[i][1]);

            }

        }

        context.closePath();//闭合路径

        context.stroke();//画线框

    }

    var IsPaint = true;

    $("#clearrect").click(function () {

        IsPaint = !IsPaint;

    })

    //橡皮擦

    function clearRect() {

        context.moveTo(array_paint[0][0], array_paint[0][1]);//将画笔移到x0,y0处

        if (array_paint.length == 1)

            context.clearRect(array_paint[0][0] + 1, array_paint[0][1] + 1, 20, 20);//从画笔位置到x1,y1画一条线

        else {

            var i = 1;

            for (i in array_paint) {

                context.clearRect(array_paint[i][0], array_paint[i][1], 20, 20);

                context.moveTo(array_paint[i][0], array_paint[i][1]);

            }

        }

    }

    //按下鼠标

    canvas_.onmousedown = function (event) {

        m_down = true;

        current_x = event.offsetX;

        current_y = event.offsetY;

        array_paint.push([current_x, current_y]);

        if (IsPaint) {

            paint();

        } else {

            clearRect();

        }

    }

    //鼠标松开,清空数据

    canvas_.onmouseup = function (event) {

        m_down = false;

        array_paint = [];

    }

    //鼠标按下后拖动

    canvas_.onmousemove = function (event) {

        if (m_down) {

            current_x = event.offsetX;

            current_y = event.offsetY;

            array_paint.push([current_x, current_y]);

            if (IsPaint) {

                paint();

            } else {

                clearRect();

            }

        }

    }

</script>

3、一些小样式

    <style type="text/css">

        #_canvas {

            background-color: rgb(240, 240, 240);

        }

        .row {

            width: 100%;

            height: 100px;;

        }

        .row > div {

            width: 50%;

            float: left;

        }

        .row > div > ul {

            display: flex;

            list-style: none;

        }

        .row > div > ul > li {

            width: 40px;

            height: 40px;

            margin: 0 5px;

        }

        .lineWidth > li {

            margin: 0 5px;

            border: 1px solid #000000;

        }

        .lineWidth > li > div {

            width: 40px;

            height: 2px;

            background-color: rgb(0, 0, 0);

        }

    </style>

Canvas画板的更多相关文章

  1. QML学习笔记（二）-纯qml画图实现canvas画板-鼠标画图

    作者: 狐狸家的鱼 Github: 八至 版权声明:如需转载请获取授权和联系作者 用纯qml实现canvas画板功能,用鼠标进行画图,可以画直线,画圆,画矩形,画弧线. 由于canvas画图会有延迟和 ...

  2. canvas——画板

    注意部分: canvas的height和width不能再css中设定,应该在html中设定,否则会影响页面的分辨率. 效果图: 图1: 代码 css: #canvas{ cursor: crossha ...

  3. 简易的canvas画板

    没事仿照windows画板工具用canvas实现了一个简易版的画板. html: <!doctype html> <html> <head> <meta ch ...

  4. canvas 画板

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

  5. html5 canvas画板

    点击查看演示地址 <!DOCTYPE HTML> <html> <title>HTML5-CanvasDrawDemo</title> <meta ...

  6. html5 canvas 画板

    <!doctype html> <head> <meta http-equiv="Content-Type" content="text/h ...

  7. JS canvas 画板 撤销

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. canvas画板基础应用的学习

    canvas是html5中的绘图容器,我们可以通过javascript的控制来进行图形的绘制,绘制对象可以是路径.盒.圆.字符等,同时,你也可以通过js给画布添加图像,下面来介绍canvas的各种基本 ...

  9. canvas实践小实例一 —— 画板工具

    前面讲了一部分的canvasAPI的基础知识,光看API的介绍确实是很无趣乏味,需要一点可以激发内心的激情的东西来激励自己来学习,于是就了伴随canvasAPI学习的小实例,这样通过API的知识,结合 ...

随机推荐

  1. &lbrack;Data Structure&rsqb; Bit-map空间压缩和快速排序去重

    Bit-map是一种很巧妙的数据存储结构.所谓的Bit-map就是用一个bit位来标记某个元素对应的Value,而Key即是该元素.由于采用了Bit为单位来存储数据,可以大大节省存储空间.Bit-ma ...

  2. ztree已拥有权限显示

    抄自 http://tieba.baidu.com/p/4394654036 $(document).ready(function () { var ID=@ViewBag.id; $.ajax({ ...

  3. Hadoop 2&period;2&period;0 4结点集群安装 非HA

    总体介绍 虚拟机4台,分布在1个物理机上,配置基于hadoop的集群中包括4个节点: 1个 Master, 3个 Salve,i p分布为: 10.10.96.33 hadoop1 (Master) ...

  4. 在IE8等不支持placeholder属性的浏览器中模拟placeholder效果

    placeholder是一个很有用的属性,可以提示用户在input框中输入正确的内容,但是IE8以及IE8一下的浏览器不支持该属性,我们可以使用js来模拟相似的效果.下面直接上代码: <!doc ...

  5. Unity3D中定时器的使用

    源地址:http://unity3d.9tech.cn/news/2014/0402/40149.html 在游戏设计过程中定时器是必不可少的工具,我们知道update方法是MonoBehavior中 ...

  6. Syntactic&lowbar;sugar

    https://en.wikipedia.org/wiki/Syntactic_sugar http://*.com/questions/11366006/mysql-on-v ...

  7. warning&colon; Could not canonicalize hostname&colon; vpn

    warning: Could not canonicalize hostname: vpn vim /etc/hosts 127.0.0.1 hostname

  8. Dynamics CRM2016 Web API之通过实体的primary key查询记录

    CRM2016启用了webapi 而弃用了odata,作为码农的我们又开始学习新东西了. 下面是一段简单的查询代码,通过systemuser的primary key来查询一条记录 Web API查询方 ...

  9. 使用kbmMWConfiguration 让 kbmmw smartservice 更聪明

    以前的文章介绍了 很多 kbmmw smartservice 的使用,尤其是 rest 服务,所有的的配置都是通过 开发时写编码实现的,这样就可能导致,针对不同的应用环境,我们要重新编译代码,当然也可 ...

  10. linux下python3调用c代码或者python3调用c&plus;&plus;代码

    前几篇的blog都是为了这个实验做基础,先说 原因是python调用数据库150w条数据22s,然后处理数据,其实就2个简单的for循环,65s 需求: 1. python调用c++函数 2. c++ ...

相关文章