这篇文章主要教大家如何使用Html5编写属于自己的画画板

本文主要教您如何使用Html5编写自己的绘图板，执行绘画，调整颜色和其他操作。有兴趣的朋友可以参考

我最近了解到html5强大的绘画功能，这让我感到惊讶，因此我写了一个小工具---涂鸦板，可以实现以下功能：绘画，更改颜色，调整画笔大小

html5绘图可分为点，线，面，圆，图片等涂鸦板 php代码，点和线，它们是所有平面效果的基本点。有了这两件事涂鸦板 php代码，没有什么可以画的，只有意外的算法。

首先上传代码：

html

效果：

好的，已经准备好一个简单的绘图界面，让我们开始编写一些线条绘图代码

$.Draw = {};   
$.extend($.Draw, {   
    D2: "",   
    CX:"",   
    box: "mycavas",//画布id   
    boxObj:function(){//画布对象   
        this.CX=document.getElementbyId(this.box);   
    },   
    D2:function(){//2d绘图对象   
       this.D2 = this.CX.getContext("2d");   
    },   
    Cricle: function (x, y, r, color) {//画圆   
        if (this.D2) {   
            this.D2.beginpath();   
            this.D2.arc(x, y, r, 0, Math.pI * 2, true);   
            this.D2.closepath();   
            if (color) {   
                this.D2.fillStyle = color;   
            }   
            this.D2.fill();   
        }   
    },   
    init: function () {//初始化   
        this.boxObj();   
        this.D2();   
    }   
  
})

我相信每个人都可以在这里理解简单的代码。主要的工作是创建一个对象，包括创建画布，创建2d对象，绘制圆形方法和对象初始化方法。

在前html页面旁边调用该对象/ p>

查看代码：

var color = "#000000";//初始化颜色   
        var size = 5;//初始化尺寸   
        document.getElementbyId('color1').onchange = function () {   
            color = this.value;   
        };   
        document.getElementbyId('size').onchange = function () {   
            size = this.value;   
        };   
        $.Draw.init();//初始化   
        var tag = false;//控制鼠标当前状态并起到开启油墨开关的作用   
        var current = {};//存储鼠标按下时候的点   
        document.onmousedown = function (option) {//鼠标按下事件   
            current.x = option.x;   
            current.y = option.y;   
            $.Draw.Cricle(option.x, option.y, size, color);   
            tag = true;   
        }   
        document.onmouseup = function () {//鼠标抬起事件   
            tag = false;   
        }   
        document.onmousemove = function (option) {//鼠标移动事件   
            if (tag) {   
                if (size >= 0) {   
                    $.Draw.Cricle(option.x, option.y, size, color);   
                }    
            }   
        }

此代码主要具有以下含义

1.捕获拖动栏控件的颜色空间和change事件以获得相应的颜色和尺寸值，并将其存储在以下绘图线中

2.初始化图形对象

3.捕获鼠标按下，抬起和移动事件，关键是开关可以控制墨水

好吧，我的书法上只有一个简单的涂鸦板：

相关文章：

基于纯CSS3的6种手绘涂鸦按钮效果

如何使用html5和css3完成Google涂鸦动画

基于javascript html5画布实现具有可调整的画笔颜色/厚度/橡皮擦的涂鸦板

以上是Html5的示例代码的详细内容，以简单地实现涂鸦板。有关更多信息，请关注php中文网站上的其他相关文章！

名称栏目：这篇文章主要教大家如何使用Html5编写属于自己的画画板
文章URL：https://www.cdcxhl.com/news13/295913.html

成都网站建设公司_创新互联，为您提供企业网站制作、云服务器、网站设计、定制网站、网站制作、网站导航

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联