一、參數來源于Android客戶端
二、html頁面
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title> title </title>
<script src="jquery.js"></script>
<style type="text/css">
canvas{
border: 1px solid black;
}
</style>
</head>
<body onload="init();">
this is body:<br/>
<canvas id="test-canvas" width="1340px" height="500px">抱歉，你的瀏覽器不支持canvas（當瀏覽器不支持時，canvas標簽內的內容會被顯示）</canvas>
</body>
</html>
三、主要js控制
注：（此處所用demo的info雖然長度就2，但數據結構比較復雜，擴展性比較好，可以正反撤銷，只顯示某個人的等復雜的涂鴉操作。info正常情況下是畫一筆傳一次，對lines追加進行追加）
<script type="text/javascript">
var info = '[{"author":"88A0864BBEE246BF8ED59EA3FEE26E40","color":1,"id":1,"points":[{"x":0.74375,"y":0.12039801},{"x":0.7476631,"y":0.111881405},{"x":0.7859946,"y":0.087521285},{"x":0.82673794,"y":0.08850872},{"x":0.84499437,"y":0.09974015},{"x":0.8853753,"y":0.17132203},{"x":0.8897556,"y":0.21296544},{"x":0.8675483,"y":0.30277675},{"x":0.8380556,"y":0.351431},{"x":0.76671785,"y":0.4415483},{"x":0.722152,"y":0.49456975},{"x":0.7213542,"y":0.49552238}],"width":0.0020833334},{"author":"88A0864BBEE246BF8ED59EA3FEE26E40","color":1,"id":2,"points":[{"x":0.69375,"y":0.55422884},{"x":0.7009463,"y":0.54679185},{"x":0.71752954,"y":0.544742},{"x":0.72783816,"y":0.5712108},{"x":0.72734267,"y":0.6173053},{"x":0.71250314,"y":0.70410824},{"x":0.7048618,"y":0.73096216},{"x":0.7007172,"y":0.7429573},{"x":0.6974098,"y":0.74925375},{"x":0.69799846,"y":0.74352187},{"x":0.7047093,"y":0.71900743},{"x":0.7151771,"y":0.6937196},{"x":0.7264439,"y":0.67380184},{"x":0.73568565,"y":0.66138315},{"x":0.7408195,"y":0.6571788},{"x":0.7433488,"y":0.65734464},{"x":0.7453125,"y":0.67542917},{"x":0.7435694,"y":0.7035472},{"x":0.7385216,"y":0.7283287},{"x":0.72257334,"y":0.75484276},{"x":0.71770835,"y":0.74370515},{"x":0.72069967,"y":0.7128979},{"x":0.7294462,"y":0.6836851},{"x":0.7451303,"y":0.65378714},{"x":0.7606162,"y":0.62946516},{"x":0.77008843,"y":0.61740845},{"x":0.77635115,"y":0.6105905},{"x":0.7793638,"y":0.607503},{"x":0.7758453,"y":0.57187814},{"x":0.7839416,"y":0.5072019},{"x":0.8098504,"y":0.47055495},{"x":0.79448074,"y":0.55937546},{"x":0.7610427,"y":0.66774344},{"x":0.7557772,"y":0.6846293},{"x":0.75351787,"y":0.6926511},{"x":0.75951856,"y":0.6945274},{"x":0.7791436,"y":0.6695561},{"x":0.80038416,"y":0.63468504},{"x":0.8199764,"y":0.58985746},{"x":0.82938135,"y":0.55807644},{"x":0.8322831,"y":0.54168004},{"x":0.8328125,"y":0.53454083},{"x":0.81875,"y":0.5393035},{"x":0.8007047,"y":0.5842821},{"x":0.78573895,"y":0.63312054},{"x":0.7790026,"y":0.6745721},{"x":0.7776506,"y":0.6875685},{"x":0.7765945,"y":0.6962112},{"x":0.77891,"y":0.66761684},{"x":0.78773016,"y":0.5853061},{"x":0.790335,"y":0.57161635},{"x":0.7942515,"y":0.56319636},{"x":0.8126348,"y":0.6456677},{"x":0.82694346,"y":0.7595096},{"x":0.828125,"y":0.76915425},{"x":0.828125,"y":0.76915425}],"width":0.0020833334}]';
var lines;
var canvasWidth = 1340;
var canvasHeight = 500;
var drawLines = function(lineId){
var canvas = document.getElementById('test-canvas');
if(canvas==null){
return;
}
var ctx = document.getElementById('test-canvas').getContext('2d');
var linesLenth = lines.length;
console.log("linesLenth:"+linesLenth);
for(var i = 0;i < linesLenth; i++){
var line = lines[i];
if(lineId!=i){
var lineColor;
var lineWidth;
var lineJoin = ['round','bevel','miter'];
ctx.lineJoin = lineJoin[0];//屬性值決定了圖形中兩線段連接處所顯示的樣子
var lineCap = ['butt','round','square'];
ctx.lineCap = lineCap[1];//屬性 lineCap 的值決定了線段端點顯示的樣子
ctx.lineWidth = canvasWidth*line.width;
switch (line.color){
case 1: lineColor = "#000000";break;
case 2: lineColor = "#FF2A00";break;
case 3: lineColor = "#FFC600";break;
case 4: lineColor = "#00C6FF";break;
default: lineColor = "#000000";
}
ctx.strokeStyle = lineColor;
var points = line.points;
ctx.beginPath();
var lastX = points[0].x;
var lastY = points[0].y;
ctx.moveTo(lastX*canvasWidth,lastY*canvasHeight);
for(var j=0;j < points.length;j++){
var newX = points[j].x;
var newY = points[j].y;
ctx.quadraticCurveTo(lastX*canvasWidth,lastY*canvasHeight,((lastX+newX)/2)*canvasWidth,((lastY+newY)/2)*canvasHeight);
lastX = points[j].x;
lastY = points[j].y;
}
ctx.lineTo(lastX*canvasWidth,lastY*canvasHeight);
ctx.stroke();
}else{
return;
}
}
}
var init = function(){
lines = JSON.parse(info);
}
</script>
四、擴展js
追加lines
var saveDrawLine = function(line){
var newLines = new Array(line.id);
for(var i = 0;i < newLines.length;i ++){
if(i!=newLines.length-1){
newLines[i] = lines[i];
}else{
newLines[i] = line;
}
}
lines = newLines;
cleanCanvas();
drawLines();
return lines;
}
清除畫布重新繪制到哪個線
var reViewCanvas = function(info){
var id = info;
cleanCanvas();
drawLines(id);
}
var cleanCanvas = function clearCanvas(){
var canvas = document.getElementById("test-canvas");
if(canvas!=null){
var cxt = canvas.getContext("2d");
cxt.clearRect(0,0,canvas.width,canvas.height);
}
}
補充真的涂鴉其實還有參照的，比圖在圖片上涂鴉，所以真的在做涂鴉的功能的時候肯定是多個平臺組合，此處先寫到這里，也算符合標題了。
五、demo效果
瀏覽器控制臺輸入
drawLines(2)
demo效果圖
