結合之前的api可以來個簡單的實踐
栗子：結合滑鼠互動效果實現畫板的功能，有寫的功能以及橡皮擦的功能（撤銷、前進就先不考慮了）
首先來個布局：
需要調節線的粗細以及橡皮擦的大小，我們需要h5的範圍表單元素
html
線的粗細：
橡皮檫的大小：
var linerange = document.getelementbyid('line');
var rubrange = document.getelementbyid('rub');
var canvas = document.createelement('canvas');
canvas.width = 500;
canvas.height = 500;
canvas.style.csstext = 'border: 1px solid #ccc';
// 線的尺寸
linerange.addeventlistener('input', changelinewidth);
// 橡皮尺寸
rubrange.addeventlistener('input', changerubsize);
// 橡皮檫的尺寸
function changerubsize()
// 線的粗細
function changelinewidth()
var ctx = canvas.getcontext('2d');
// 線的粗細
ctx.linewidth = 4;
// 橡皮檫的尺寸
var rubsize = 1;
// 是否可用寫擦功能
var ispress = false;
// 按鈕型別
var btntype;
canvas.addeventlistener('mousedown', pendown);
// 左鍵為 寫 0
// 中鍵為 橡皮檫 1
// 下筆事件
function pendown(event)
}
canvas.addeventlistener('mousemove', penmove);
// 筆移動事件
function penmove(event)
}}// 寫
function write(x, y)
// 擦：擦的功能則是clearrect， 需要注意的是，橡皮擦的中心需要是游標的中心
function rub(x, y)
滑鼠抬起事件觸發，則ispress需要重置為false，閉合路徑
canvas.addeventlistener('mouseup', penup);
// 提筆
function penup()
canvas 閉合 Canvas的絢爛起點
可以理解為，它提供了一塊畫布，在它所掌控的區域，可以運用各種方法繪製圖形 文字，或者製作動畫 處理影象，等等。通常我們能夠看到一些炫酷的動畫，很多都是canvas做出來的，但是需要各種元素和技巧綜合使用，不是一蹴而就的，我們先從基礎看起。var canvas document.getelementb...
canvas 閉合 canvas 線的樣式
線的樣式在canvas中分為輪廓顏色 以及線型的樣式 strokestyle color 設定描邊輪廓的顏色ctx.linecap butt 預設 正常 屬性值 round 多出半圓 square 多出方形 ctx.linewidth 20 ctx.strokestyle red 線帽 線的兩端的樣...
Canvas學習系列一 初識canvas
最近你開始在學習canvas，打算把學習canvas的整個學習過程當中的一些筆記與總結記錄下來，如有什麼不足之處還請大神們多多指出。1.canvas介紹 canvas元素的出現，可以說開啟的web世界繪製動畫，圖形的大門，其功能非常強大 canvas 元素是html5中功能最強大的元素，它的能力主要...