本文主要教您如何使用Html5編寫自己的繪圖板，執(zhí)行繪畫，調(diào)整顏色和其他操作。有興趣的朋友可以參考

我最近了解到html5強大的繪畫功能，這讓我感到驚訝，因此我寫了一個小工具---涂鴉板，可以實現(xiàn)以下功能：繪畫，更改顏色，調(diào)整畫筆大小

html5繪圖可分為點，線，面，圓，圖片等涂鴉板 php代碼，點和線，它們是所有平面效果的基本點。有了這兩件事涂鴉板 php代碼，沒有什么可以畫的，只有意外的算法。

首先上傳代碼：

html

效果：

好的，已經(jīng)準備好一個簡單的繪圖界面，讓我們開始編寫一些線條繪圖代碼

$.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();   
    }   
  
})

我相信每個人都可以在這里理解簡單的代碼。主要的工作是創(chuàng)建一個對象，包括創(chuàng)建畫布，創(chuàng)建2d對象，繪制圓形方法和對象初始化方法。

在前html頁面旁邊調(diào)用該對象/ 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;//控制鼠標當前狀態(tài)并起到開啟油墨開關的作用   
        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畫布實現(xiàn)具有可調(diào)整的畫筆顏色/厚度/橡皮擦的涂鴉板

以上是Html5的示例代碼的詳細內(nèi)容，以簡單地實現(xiàn)涂鴉板。有關更多信息，請關注php中文網(wǎng)站上的其他相關文章！