Skip to content

Instantly share code, notes, and snippets.

@fillano

fillano/canvas 2d detect and simple test

Created October 20, 2010 15:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fillano/636627 to your computer and use it in GitHub Desktop.
Save fillano/636627 to your computer and use it in GitHub Desktop.
Download ZIP
偵測瀏覽器對於canvas 2d規格的支援程度，並且畫一個小叉叉做測試。
Raw
canvas 2d detect and simple test
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<style>
div {
background: #AACCEE;
border: solid 1px #336699;
margin: 10px;
padding: 5px;
border-radius: 5px;
display: inline-block;
vertical-align: top;
}
</style>
<script src="js/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function() {
function drawX() {
var document = window.document;
var canvas = document.getElementById('canvas');
var context2d = canvas.getContext('2d');
context2d.save();
context2d.globalAlpha = 0.75;
context2d.lineWidth = 6;
context2d.beginPath();
context2d.strokeStyle = '#CCDDEE';
context2d.moveTo(4,4);
context2d.lineTo(54,54);
context2d.moveTo(54,4);
context2d.lineTo(4,54);
context2d.stroke();
context2d.globalAlpha = 0.5;
context2d.lineWidth = 4;
context2d.beginPath();
context2d.strokeStyle = '#0000FF';
context2d.moveTo(2,2);
context2d.lineTo(52,52);
context2d.moveTo(52,2);
context2d.lineTo(2,52);
context2d.closePath();
context2d.stroke();
context2d.restore();
};
function row(cells) {
return '<tr>' + cells.join('') + '</tr>\n';
}
function cell(text, style, col) {
return '<td' + (col? ' colspan="'+col+'"':'') + (style? ' style="'+style+'"':'') + '>' + text + '</td>';
}
function DOMInspector(result, obj, attr) {
var ret = {
'result':result,
'SupportedAttributes':[],
'UnsupportAttributes':[],
'SupportedMethods':[],
'UnsupportMethods':[]
};
for(var i=0; i<attr.attr.length; i++) {
if(obj[attr.attr[i]] !== undefined) {
ret.SupportedAttributes.push(attr.attr[i]);
} else {
ret.UnsupportAttributes.push(attr.attr[i]);
}
}
for(var i=0; i<attr.mthd.length; i++) {
if(obj[attr.mthd[i]] !== undefined) {
ret.SupportedMethods.push(attr.mthd[i]);
} else {
ret.UnsupportMethods.push(attr.mthd[i]);
}
}
return ret;
}
function resultParser(test) {
var str = '<table cellpadding="2" cellspacing="0" border="1">';
for(var i in test) {
if(i == 'result') {
str += row([cell(test[i],null,2)]);
} else {
str += row([cell(i),cell(test[i].length>0? test[i].join('<br>'):'&nbsp;')]);
}
}
str += '</table>';
return str;
}
function HTMLCanvasInspector(obj) {
var map = {
attr: [
'width',
'height'
],
mthd: [
'getContext',
'toDataURL'
]
};
return DOMInspector('HTMLCanvasElement Interface support.', obj, map);
}
function Canvas2DContextInspector(obj) {
var map = {
attr: [
'canvas',
'globalAlpha',
'globalCompositeOperation',
'strokeStyle',
'fillStyle',
'lineWidth',
'lineCap',
'lineJoin',
'miterLimit',
'shadowOffsetX',
'shadowOffsetY',
'shadowBlur',
'shadowColor',
'font',
'textAlign',
'textBaseline'
],
mthd: [
'save',
'restore',
'scale',
'rotate',
'translate',
'transform',
'setTransform',
'createLinearGradient',
'createPattern',
'clearRect',
'strokeRect',
'beginPath',
'beginPath',
'closePath',
'moveTo',
'lineTo',
'quadraticCurveTo',
'bezierCurveTo',
'arcTo',
'rect',
'arc',
'fill',
'stroke',
'clip',
'isPointInPath',
'drawFocusRing',
'fillText',
'strokeText',
'measureText',
'drawImage',
'createImageData',
'getImageData',
'putImageData'
]
};
return DOMInspector('CanvasRenderingContext2D Interface support.', obj, map);
}
$('#panel1').html(resultParser(HTMLCanvasInspector($('#canvas')[0])));
$('#panel2').html(resultParser(Canvas2DContextInspector($('#canvas')[0].getContext('2d'))));
$('#test').bind('click', drawX);
});
</script>
</head>
<body>
<div id="container"><canvas id="canvas" width="320" height="200"></canvas><input type="button" id="test" value="畫叉叉"></div><br>
<div id="panel1"></div>
<div id="panel2"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment