javascript實現簡單畫布

阿新 • • 發佈：2019-01-22

程式碼塊

程式碼塊語法遵循標準markdown程式碼，例如：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" 
>
<title>Insert title here</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<canvas style="cursor:pointer" id="canvas" width="600" height="400"></canvas>
        <input id="color" 
 type="color" value="#000000"/>
        <input id="size" type="range" max="100" min="1" value="1"/>
        <input name="tools" type="radio" value="pen" checked/>
        <input name="tools" type="radio" value="eraser"/>
        <button style="cursor:pointer;" id="cc" >clear</button>
<script type="text/javascript" 
>
var c = document.getElementById("canvas");
var cxt=c.getContext("2d");
cxt.strokeStyle = "#111";
cxt.strokeRect(0, 0, 600, 400);

$('#cc').click(function(){
    context.clearRect(1,1,598,398);
    clickX = [];
    clickY = [];
    clickDrag = [];
    paint;

    colorPurple = "#cb3594";
    curColor = colorPurple;
    clickColor = [];
    curSize = 1;
    clickSize = [];
    curTool = 'pen';
})

context = canvas.getContext("2d");
$('#canvas').mousedown(function(e) {
    //console.log('mousedown');
    var mouseX = e.pageX - this.offsetLeft;
    var mouseY = e.pageY - this.offsetTop;
    paint = true;
    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
    redraw();
});

$('#canvas').mousemove(function(e) {
    //console.log('mousemove');
    if (paint) {//是不是按下了滑鼠
        addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
        redraw();
    }
});

$('#canvas').mouseup(function(e) {
    //console.log('mouseup');
    paint = false;
});
$('#canvas').mouseleave(function(e) {
    //console.log('mouseleave');
    paint = false;
});

var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;

var colorPurple = "#cb3594";
var curColor = colorPurple;
var clickColor = new Array();
var curSize = 1;
var clickSize = [];
var curTool = 'pen';
function addClick(x, y, dragging) {
    //console.log('addClick');
    clickX.push(x);
    clickY.push(y);
    clickDrag.push(dragging);
    clickSize.push(curSize);

    if (curTool == "eraser") {
        clickColor.push("white");
    } else {
        clickColor.push(curColor);
    }  

}
function redraw() {
    //console.log('redraw');
    context.lineJoin = "round";
    for (var i = 0; i < clickX.length; i++) {
        context.beginPath();
        if (clickDrag[i] && i) {
            context.moveTo(clickX[i - 1], clickY[i - 1]);
        } else {
            context.moveTo(clickX[i] - 1, clickY[i]);
        }
        context.lineTo(clickX[i], clickY[i]);
        context.closePath();
        context.strokeStyle = clickColor[i];
        context.lineWidth = clickSize[i];
        context.stroke();
    }
}

$('#color').change(function(e) {
    curColor = $(this).attr('value');
});
$('#size').change(function(e) {
    curSize = $(this).attr('value');
}); 
$('input[name="tools"]').change(function(e) {
    curTool = $(this).attr('value');
});
</script>
</body>
</html>

javascript實現簡單畫布

程式碼塊程式碼塊語法遵循標準markdown程式碼，例如： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

Javascript實現簡單的選項卡

-a www 在線演示 == doc ++ style log rac 在線演示：http://jsfiddle.net/Web_Code/TbPDd/embedded/result/ <!DOCTYPE html PUBLIC "-//W3C//

用javascript實現簡單的用戶登錄驗證

-c turn get https 沒有驗證 utf-8 .com head 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="

JavaScript實現簡單圖片滾動 --9張圖告訴你，C羅欲哭無淚

charset () element edit fas 簡單圖 pad jpg sni 源代碼下載：http://download.csdn.net/detail/u011043843/7510425 昨晚德國和葡萄牙的焦點之戰你看了嗎？北京時間淩晨的比賽

JavaScript 實現簡單的彈出框關閉框

JavaScript 實現簡單的彈出框關閉框知識點: 　　1.javaScript 新增HTML標籤　　2.javaScript 新增HTML標籤屬性　　3.javaScript 追加元素程式碼獻上: <!doctype html> <html lang="en

用 JavaScript 實現簡單拼圖遊戲

本篇主要講解，如何利用原生的 JavaScript 來實現一個簡單的拼圖小遊戲。線上體驗地址：拼圖一、遊戲的基礎邏輯想用一門語言來開發遊戲，必須先了解如何使用這門語言來實現一些基礎邏輯，比如影象的繪製、互動的處理、定時器等。 1、圖形繪製圖形繪製是一切的基礎，這裡使用 Ja

用JavaScript實現簡單的驗證碼

用JavaScript實現簡單的驗證碼先展示一下最終的效果圖

原生JavaScript實現簡單瀑布流

瀑布流，想必大家都有所瞭解，簡單說就是一些等寬不等高的模組組成的頁面，可以一直進行載入，比如淘寶購物介面、百度瀏覽圖片介面，都採用了瀑布流，接下來使用原生JS程式碼進行實現。 html結構： <!DOCTYPE html> <html lang

HTML-css-JavaScript實現簡單登入註冊功能，並讓登入和註冊在同一頁內切換。

（水平有限，如果發現有什麼問題，歡迎指出來） HTML+css先做出來一個登入頁，包括基本的輸入框和button。再做一個註冊頁。程式碼如下：隨後解釋程式碼 <form id="register" name="myForm" class="register"

javascript實現簡單的時間倒計時

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&g

JavaScript實現簡單的雙向資料繫結（Ember、Angular、Vue）

什麼是雙向資料繫結呢？簡單的說就是UI檢視與資料繫結在了一塊也就是資料和檢視是同步改變的雙向資料繫結最常見的應用場景就是表單（應用場景還是很有限的）現在我們要實現這樣一個簡單的資料繫結輸入欄中輸入字元和它繫結的節點內容

利用Html+JavaScript實現簡單購物車

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Shopping Car</title> <scr

JavaScript實現簡單的圖片輪播（通過點選左右焦點切換）

最終實現效果圖程式碼塊 <!DOCTYPE html> <html lang="en"> <head> <meta charset

JavaScript實現簡單計算器

一位 trac turn result set 加法除法 asc class <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g

JavaScript實現簡單表單驗證

在我們進行註冊的時候，把滑鼠點進“請輸入帳號”的輸入框時，輸入框的旁邊會有提示資訊，提示我們要輸入的資訊格式，在我們輸入後滑鼠點進下一個輸入框時，已經填寫過的輸入框會對於我們填入的內容進行判斷，若不符合要求會提示我們重新輸入，大致如下圖所示: 上述功能

使用javascript實現簡單的輪播圖效果

最近在做公司的網站，有一個輪播圖的功能，網上倒是有現成的js元件，我用了一下swiper,但是發現嵌入進去時不太好用，好在公司的網站要求也不是很高，索性就使用純的js做一下唄。 1.首先新建一個html頁面，先把簡單的佈局做出來我的html部分如下 <body&g

javascript實現簡單使用者登入表單驗證功能

javascript實現簡單的收藏功能

想用js實現一個簡單的收藏功能：點選頁面上的一個收藏按鈕，然後就會收藏網址到收藏夾，以便於下次快捷檢視。最開始的時候打算找一下jquery外掛，找了半天沒找到，哎，自己寫原生的js程式碼實現相容各個瀏覽器的js程式碼感覺有點蛋疼，還是簡單的搞一下吧。 $(".scoll

Javascript實現簡單進度條

<html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/c

JavaScript裏的Date 對象屬性及對象方法－－實現簡單的日歷

tor 個數 lin all date rip rec 說明進行上網搜索"js 日歷插件"就會出來各種效果的功能豐富的日歷插件,很多都可以下載源碼,然後根據各自的需求對源碼進行修改就可以直接用了. 但今天講的不是如何使用這些插件,而是講如何實現一個很簡單的只有當前這

javascript實現簡單畫布

程式碼塊

相關推薦