HTML5-簡易Canvas繪圖板

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

除了canvas以外，還用了一丟丟meta清除頁面快取，color型別和range型別的input控制元件。其他基本就一些滑鼠響應事件了。總之就一個十分簡易的canvas繪圖板。貼個原始碼。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" 
 content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> 
<meta http-equiv="expires" content="0">
<title>canvas繪圖板</title>
<style>
canvas{
    border:1px dashed black 
;}
</style>
<script type="text/javascript">
var canvas;
var context;
window.onload=function(){
    canvas=document.getElementById("drawingCanvas");
    context=canvas.getContext("2d");
    context.fillStyle="rgb(255,255,255)";
    context.fillRect(0,0,canvas.width,canvas.height);
    context.strokeStyle="rgb(0,0,0)" 
;
    context.lineWidth=5;
    canvas.onmousedown=startDrawing;
    canvas.onmouseup=stopDrawing;
    canvas.onmouseout=stopDrawing;
    canvas.onmousemove=draw;
    };
var previousColorElement;
function changeColor(color,imgElement){
    context.strokeStyle=color;
    imgElement.className="Selected";
    if(previousColorElement!=null){
        previousColoeElement.className="";
        }
        previousColorElement=imgElement;
    }
var previousThicknessElement;
function changeThickness(thickness,imgElement){
    context.lineWidth=thickness;
    imgElement.className="Selected";
    if(previousThicknessElement!=null){
        previousThicknessElement.className="";
        }
        previousThicknessElement=imgElement;
    }
var isDrawing=false;
function startDrawing(e){
    isDrawing=true;
    context.beginPath();
    context.moveTo(e.pageX-canvas.offsetLeft,e.pageY-canvas.offsetTop);
    }
function draw(e){
    if(isDrawing==true){
        var x=e.pageX-canvas.offsetLeft;
        var y=e.pageY-canvas.offsetTop;
        context.lineTo(x,y);
        context.stroke();
        }
    }
function stopDrawing(){
    isDrawing=false;
    }
function clearCanvas(){
    context.fillStyle="rgb(255,255,255)";
    context.fillRect(0,0,canvas.width,canvas.height);
    }
</script>
</head>
<body>
<div align="center">
COLOR<input type="color" id="colorSelect" onchange="changeColor(colorSelect.value,this);" value="rgb(255,255,255)"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
WIDTH<input type="range" id="widthSelect" onchange="context.lineWidth=widthSelect.value;" min="1" max="20"/ value="5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button id="clearCanvas" onclick="clearCanvas();">CLEAR ALL</button>
<br />
<canvas id="drawingCanvas" width="800" height="400"></canvas>
</div>
</body>
</html>

大概這個鬼樣子。
canvas繪圖板介面
火狐之類的瀏覽器可以直接右鍵儲存繪製的影象為*.png不過我想的是用填充白色就不用寫橡皮擦了所以整個畫布都是填充了白色，存的*.png並不會有透明背景。

HTML5-簡易Canvas繪圖板

除了canvas以外，還用了一丟丟meta清除頁面快取，color型別和range型別的input控制元件。其他基本就一些滑鼠響應事件了。總之就一個十分簡易的canvas繪圖板。貼個原始碼。 &l

Html5用Canvas製作繪圖板

不要使用style或者css對canvas的width和height設定值，否則會引起座標等被放大的問題使用jquery獲取canvas的時候要使用 “$('#canvas').get(0)”，否則則取不到相應的物件調色盤使用的是“spectrum.js”取值賦值採用json模式，使用過的是“jquery.j

html5之canvas畫圖 1.寫字板功能

load har line client ctype 監聽事件 tle ntb csdn 寫字板事例：寫字板分析：1.點擊鼠標開始寫字（onmosedown）2.按下鼠標寫字（onmousemove）3.松開鼠標，停下寫字（

HTML5之canvas元素

矩形色值 body www rip white col ble script 定義和用法 fillStyle 屬性設置或返回用於填充繪畫的顏色、漸變或模式。默認值： #000000 JavaScript 語法： context.fillStyle=color|gr

HTML5中Canvas與SVG的畫圖原理比較

面積 com 像素 jpg 最終不同谷歌最適保存　　canvas 與 SVG都能夠使你在瀏覽器中畫圖，但它們的基本原理不同。鞍山治療白癜風多少錢www.pfk0412.com 　　SVG 　　SVG是一種在XML中描述二維圖形的語言。　　SVG是基於XML的，意

HTML5簡易總結

安全表單移動 ade var -m 設置 lec 阻止 1.video標簽（支持Ogg MPEG4 WebM） IE9 9+ 屬性：src width height loop controls autoplay preload; 方法：play() pause() l

HTML5、canvas、SVG

clas 使用數據色彩 get parse 元素 oca hat ##總結 - 從這兩天的課程裏，我學到html簡單的一個編年史，以及標簽語義化最最有益是便於SEO及對盲人設備友好。也知道的風靡一時的flash為什麽會被html5打敗。 - HTML5新增了很多

如何使用HTML5的canvas屬性

png BE new draw lan ID function ++ math 如何在畫布上畫矩形？ 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta c

HTML5的canvas寫會走動的鐘

目錄第四章 HTML5中的canvas 一) canvas基礎二) 繪製矩形三) canvas繪製圓形四) 使用moveTo()和lineTo()繪製路徑第

html5 <canvas>畫圖

坐標軸坐標 icc 十六進制 global ref 字體樣式都在水平 <canvas></canvas>是html5出現的新標簽 context是一個封裝了很多繪圖功能的對象，獲取這個對象的方法是 var context=canvas.get

[html5 canvas]用html5的canvas畫一個可移動的方塊

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>MyGame</title> <styl

html5中canvas繪製箭頭

網頁端程式碼 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ht

html5的canvas知識總結（5）

1. 填充圖案 createPattern() 方法在指定的方向內重複指定的元素。元素可以是圖片、視訊，或者其他 <canvas> 元素。（1）圖片 createPatter（image, "repeat | repeat-x | repeat-y | n

html5的canvas知識總結（6）

1.陰影陰影的x軸偏移量：ctx.shadowOffsetX = 20; 陰影的y軸偏移量：ctx.shadowOffsetY = 20; 陰影的顏色：ctx.shadowColor = 'green'; 2. 文字——在canvas中寫入文字關於文字

HTML5利用canvas壓縮圖片（不改變圖片寬和高）

最近專案中有一個手機拍照上傳的需求，現在的智慧手機攝像頭畫素很高，拍出來的照片大小大都在5M左右，當手機在上傳圖片時遇到了問題，之前採用的方法是將圖片先進行Base64編碼，然後上傳到伺服器，結果因為圖片太大，導致伺服器老是回覆超時錯誤；權衡之下決定在圖片上傳之前先將圖片壓縮；以下為我採用方法

HTML5-用Canvas製作會走動的時鐘

首先我們要清楚canvas是HTML5中新增的一個元素，專門用來繪製圖形。在頁面放置一個canvas元素，就相當於放置了一個畫布，可以在其中進行圖形的繪製。為canvas新增簡單的樣式 <style> body{ background: black;

HTML5畫布Canvas繪製技能全面深入實戰剖析

簡介：本課程為Canvas系列課程第二課。通過對《絢麗的倒計時效果的學習》，在大家對Canvas繪圖有一定了解的基礎上，本課程對Canvas的各個圖形介面進行了系統詳細地介紹，並輔以示例，讓同學徹底掌握Canvas繪圖，隨心所欲在瀏覽器上繪製炫麗效果！ [color=rgb(242, 1

關於HTML5中Canvas的寬、高設定有關問題

Canvas元素預設寬 300px, 高 150px, 設定其寬高可以使用如下方法：方法一： 1 方法二：使用HTML5 Canvas API操作 OK 1 var canvas = document.getElementById(‘欲操作canvas的id’); 2 canvas.wi

HTML5之Canvas 2D入門3

知識準備 - 座標系　　在真正開始總結變換之前，我們需要先了解一下canvas的相關座標系知識。 “畫素座標系”：在HTML中，我們會設定canvas的屬性：width和height，它們是以畫素為單位的，它們描述了canvas最終的呈現區域，我形象稱之為

html5 用canvas實現圖片自動滑動切換

轉自：http://blog.csdn.net/iamke1987/article/details/9886707 圖片自動滑動效果很多網站都要用，最近在學html5就拿這個練練手，發現用canvas實現起來其實很簡單。程式碼比較粗糙，有很多改進的地方，不過還是先記錄一

HTML5-簡易Canvas繪圖板

相關推薦