学习HTML5 canvas第2天
2015-06-15 08:26
661 查看
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#canvasParent{
margin: 0; padding: 0;
width: 500px;
height: 500px;
clear: both;
border:1px solid red;
display: block;
position: fixed;
//background: rgba(0,255,0,0.5);
top: 0px;
left: 0px;}
#mycanvas
{
height: 300px;
}
</style>
</head>
<body>
<canvas id = "mycanvas" width="1200" height="500">
</canvas>
<script>
var node;
var count = 0;
//http://html5.9tech.cn/news/2013/1119/38694.html
window.onload = function()
{
var context = createContext("mycanvas");
//drawCircle(context,10,10,20,true)
context.canvas
// var p = new Point(10, 20)
// drawSqure(context,p, 100, 20)
// var WINDOW_WIDTH = 500;
// setInterval(function(){
// // context.clearRect(0,0,500,500)
// if (WINDOW_WIDTH > 200)
// WINDOW_WIDTH = WINDOW_WIDTH - 10;
// else
// WINDOW_WIDTH = WINDOW_WIDTH + 10;
//
// drawGrid(context,WINDOW_WIDTH--,50);
// }, 1000)
// context.font = "lighter 50px Arial"
// //context.lineWidth = 1;
//
// context.fontStyle = "oblique"
// context.fillStyle = "pink"
// context.fontWeight = 10;
// context.fillText("HTML5 welcome you!@@@",100,200 )
//context.fillStyle = "black"
// context.fillText("HTML5",0,100,200)
var img = new Image();
img.src = "1.jpg";
var images = Array(7);
img.onload = function() {
for (var i=0; i< 7; i++) {
context.drawImage(img, 10 + 100*i, i *30, 200- i*7, 500 - i*8);
}
}
// artisan.drawCircle('mycanvas', 150, 150, 30, '#809CA7');
// artisan.drawLine('mycanvas',10,10,100,200,5, "red")
// artisan.drawRectangle("mycanvas",20,10,100,100,"blue",10,"black",0.5)
// //artisan.drawImage("mycanvas","images/1.jpg",10,100,100,)
// artisan.rotateCanvas("mycanvas","random")
}
</script>
<script src ='lib.js'></script>
<script src ='point.js'></script>
<script src ='Animation.js'></script>
<script src ='circle.js'></script>
<script src ='artisan.js'></script>
</body>
</html>/**
* Created by Administrator on 15-6-13.
*/
//fps,start,stop,frame????????????????
function refresh()
{
setInterval(function(){
count++;
node.style.width = count*10 + "px";
node.style.height = count*10 + "px";
node.style.left = count*10 + "px";
node.style.top = count*10 + "px";
},10)
}/**
* Created by Administrator on 15-6-13.
*/
var Point = function(x, y)
{
this.x = x;
this.y =y;
}/**
* Created by Administrator on 15-6-13.
*/
function $(id)
{
return document.getElementById(id)
}
function createContext(id)
{
var node = $(id);
if (node != null && node != undefined)
{
var context = node.getContext("2d");
return context;
}
return null;
}
function drawCircle(context,radis, x, y,isFill)
{
if (context != null)
{
context.beginPath();
context.arc(x, y, radis, 0, 2 * Math.PI);
context.closePath();
if (isFill == true)
{
context.fillStyle = "black";
context.fill();
}
else
{
context.strokeStyle = "green"
context.stroke()
}
}
}
function drawSqure(context,p, w, h)
{
if (context != null && p instanceof Point)
{
context.beginPath();
context.moveTo(p.x, p.y)
context.lineTo(p.x + w, p.y)
context.lineTo(p.x + w, p.y + h)
context.lineTo(p.x, p.y + h)
context.closePath();
context.lineWidth = 10
context.lineJoin = "round"
context.strokeStyle = "green"
context.stroke()
}
}
//need to modify,it's not a perfect function!!!
function drawGrid(context,gw, unit)
{
var count = Math.floor(gw/unit)
if (context != null)
{
for (var i=0; i<count; i++)
{
context.beginPath();
console.log("X:0, y: ", i*unit )
context.moveTo(0, 0+i*unit )
console.log("X:",gw, " y:", i*unit )
context.lineTo(gw, 0+i*unit )
context.closePath();
context.lineWidth = 10;
context.strokeStyle = "blue"
// context.lineJoin = "round"
context.stroke()
}
for (var i=0; i<count; i++)
{
context.beginPath();
context.moveTo(0+i*unit, 0)
context.lineTo(0+i*unit, 0+ gw )
context.closePath();
context.lineWidth = 10;
context.strokeStyle = "green"
// context.lineJoin = "round"
context.stroke()
}
}
}
function drawPointMatrix()
{
}/**
* Created by Administrator on 15-6-14.
*/
var artisan;
artisan = (function (window, undefined) {
/*
Artisan.js by David Brooks. Details at http://www.artisanjs.com */
if (!document.createElement('canvas').getContext) {
return;
}
// Stacks are the collections of layers, and histories
var stacks = [];
var color_schemes = [];
// Default values
var default_colors = ['#AC4A08', '#6C88A1', '#D9DCC6', '#EB9E1A', '#FBCC37'];
var contexts = [];
var global_rotate = 0;
var current_history = [];
var images = [];
return {
define: {
canvas: function () {
},
stack: function () {
var colors = [];
},
defaultColors: function (new_default) {
default_colors = new_default;
}
},
setupCanvas: function (target) {
var canvas = document.getElementById(target);
var context = canvas.getContext('2d');
var this_context_pair = [target, context];
contexts.push(this_context_pair);
},
create: {
canvas: function (parent, width, height) {
// This creates a canvas element inside of parent selector
},
stack: function () {
// This adds a stack to the stacks
var new_stack = [];
var new_layer = [];
var new_history = [];
new_layer.push(new_history);
new_stack.push(new_layer);
stacks.push(new_stack);
return stacks.length - 1;
},
layer: function (stack) {
// This creates a layer and adds it to the stack
if (!stack || isNaN(stack)) {
stack = 0;
}
var new_layer = [];
var new_history = [];
new_layer.push(new_history);
stacks[stack].push(new_layer);
return stacks[stack].length - 1;
},
history: function (stack, layer) {
// This adds a history layer to a data set
if (!stack || isNaN(stack)) {
stack = 0;
}
if (!layer || isNaN(layer)) {
layer = 0;
}
var new_history = [];
stacks[stack][layer].push(new_history);
return stacks[stack][layer].length - 1;
}
},
clear: {
layer: function (stack, layer) {
// This clears the given layer of data
if (!stack || isNaN(stack)) {
stack = 0;
}
if (!layer || isNaN(layer)) {
layer = 0;
}
var target_layer = stacks[stack][layer];
for (l = 0; l < target_layer.length; l++) {
target_layer[l] = [];
}
}
},
collect: {
current_history: function () {
return current_history;
}
},
convertTo: {
PNG: function (target) {
var image_file = document.getElementById(target);
image_file = image_file.toDataURL();
return image_file;
}
},
addToHistory: function (stack, layer, history_step, directive, information) {
if (!stack || isNaN(stack)) {
stack = 0;
}
if (!layer || isNaN(layer)) {
layer = 0;
}
if (!history_step || isNaN(history_step)) {
history_step = 0;
}
var new_history = [];
new_history.push(directive, information);
stacks[stack][layer][history_step].push(new_history);
},
interpretElement: function (element) {
var target = document.getElementById(element).tagName;
return target;
},
findContext: function (element) {
var context = '';
for (c = 0; c < contexts.length; c++) {
if (contexts[c][0] == element) {
context = contexts[c][1];
}
}
if (context === '') {
artisan.setupCanvas(element);
context = artisan.findContext(element);
}
return context;
},
drawCircle: function (target, placex, placey, radius, fill_color, line_width, stroke_color, alpha, shadow_blur, shadow_color, shadow_offset_x, shadow_offset_y) {
// This handles the drawing of a circle in all three supported formats
var targeted = document.getElementById(target);
var target_width = targeted.width;
var target_height = targeted.height;
placex = artisan.interpretRequest(placex, target_width);
placey = artisan.interpretRequest(placey, target_height);
line_width = artisan.interpretRequest(line_width, target_width);
radius = artisan.interpretRequest(radius, target_width);
fill_color = artisan.interpretColor(fill_color);
alpha = artisan.interpretAlpha(alpha);
stroke_color = artisan.interpretColor(stroke_color);
shadow_color = artisan.interpretColor(shadow_color);
if (shadow_blur !== 'random') {
shadow_blur = parseInt(shadow_blur, 10);
}
shadow_offset_x = parseInt(shadow_offset_x, 10);
shadow_offset_y = parseInt(shadow_offset_y, 10);
if (!shadow_blur) {
shadow_blur = 0;
} else if (shadow_blur === 'random') {
shadow_blur = artisan.randomize(0, 30);
}
if (!shadow_offset_x || isNaN(shadow_offset_x)) {
shadow_offset_x = 0;
}
if (!shadow_offset_y || isNaN(shadow_offset_y)) {
shadow_offset_y = 0;
}
var this_circle = [placex, placey, radius, fill_color, line_width, stroke_color, alpha, shadow_blur, shadow_color, shadow_offset_x, shadow_offset_y];
var this_set = ['circle', this_circle];
current_history.push(this_set);
var format = artisan.interpretElement(target);
switch (format) {
case "CANVAS":
// Canvas
var context = artisan.findContext(target);
context.beginPath();
context.lineWidth = line_width;
context.globalAlpha = alpha;
context.arc(placex, placey, radius, 0, Math.PI * 2, true);
context.closePath();
context.fillStyle = fill_color;
if (line_width !== 0) {
context.strokeStyle = stroke_color;
context.stroke();
}
if (shadow_blur) {
context.shadowOffsetX = shadow_offset_x;
context.shadowOffsetY = shadow_offset_y;
context.shadowBlur = shadow_blur;
context.shadowColor = shadow_color;
}
if (fill_color !== '') {
context.fill();
}
break;
default:
// Standard Code
}
},
drawRectangle: function (target, start_x, start_y, width, height, fill_color, line_width, stroke_color, alpha, shadow_blur, shadow_color, shadow_offset_x, shadow_offset_y) {
var targeted = document.getElementById(target);
var target_width = targeted.width;
var target_height = targeted.height;
start_x = artisan.interpretRequest(start_x, target_width);
start_y = artisan.interpretRequest(start_y, target_height);
width = artisan.interpretRequest(width, target_width);
height = artisan.interpretRequest(height, target_height);
line_width = artisan.interpretRequest(line_width, target_width);
stroke_color = artisan.interpretColor(stroke_color);
fill_color = artisan.interpretColor(fill_color);
alpha = artisan.interpretAlpha(alpha);
if (shadow_blur !== 'random') {
shadow_blur = parseInt(shadow_blur, 10);
}
shadow_offset_x = parseInt(shadow_offset_x, 10);
shadow_offset_y = parseInt(shadow_offset_y, 10);
if (!shadow_blur) {
shadow_blur = 0;
} else if (shadow_blur === 'random') {
shadow_blur = artisan.randomize(0, 30);
}
if (!shadow_color) {
shadow_color = '';
} else if (shadow_color === 'random') {
shadow_color = default_colors[artisan.randomize(0, default_colors.length)];
} else if (shadow_color.constructor.toString().indexOf("Array") !== -1) {
shadow_color = shadow_color[artisan.randomize(0, shadow_color.length)];
}
if (!shadow_offset_x || isNaN(shadow_offset_x)) {
shadow_offset_x = 0;
}
if (!shadow_offset_y || isNaN(shadow_offset_y)) {
shadow_offset_y = 0;
}
var format = artisan.interpretElement(target);
switch (format) {
case "CANVAS":
// Canvas
var context = artisan.findContext(target);
context.fillStyle = fill_color;
context.strokeStyle = stroke_color;
context.lineWidth = line_width;
context.globalAlpha = alpha;
if (shadow_blur) {
context.shadowOffsetX = shadow_offset_x;
context.shadowOffsetY = shadow_offset_y;
context.shadowBlur = shadow_blur;
context.shadowColor = shadow_color;
}
context.fillRect(start_x, start_y, width, height);
if (line_width !== 0) {
context.strokeRect(start_x, start_y, width, height);
}
break;
default:
// Standard Code
}
},
drawImage: function (target, src, placex, placey, width, height, alpha, fill_color, line_width, stroke_color, shadow_blur, shadow_color, shadow_offset_x, shadow_offset_y) {
var targeted = document.getElementById(target);
var target_width = targeted.width;
var target_height = targeted.height;
if (src) {
placex = artisan.interpretRequest(placex, target_width);
placey = artisan.interpretRequest(placey, target_height);
width = artisan.interpretRequest(width, target_width);
height = artisan.interpretRequest(height, target_height);
line_width = artisan.interpretRequest(line_width, target_width);
fill_color = artisan.interpretColor(fill_color);
alpha = artisan.interpretAlpha(alpha);
stroke_color = artisan.interpretColor(stroke_color);
shadow_color = artisan.interpretColor(shadow_color);
if (shadow_blur !== 'random') {
shadow_blur = parseInt(shadow_blur, 10);
}
shadow_offset_x = parseInt(shadow_offset_x, 10);
shadow_offset_y = parseInt(shadow_offset_y, 10);
if (!shadow_blur) {
shadow_blur = 0;
} else if (shadow_blur === 'random') {
shadow_blur = artisan.randomize(0, 30);
}
if (!shadow_color) {
shadow_color = '';
} else if (shadow_color === 'random') {
shadow_color = default_colors[artisan.randomize(0, default_colors.length)];
} else if (shadow_color.length) {
shadow_color = shadow_color[artisan.randomize(0, shadow_color.length)];
}
if (!shadow_offset_x || isNaN(shadow_offset_x)) {
shadow_offset_x = 0;
}
if (!shadow_offset_y || isNaN(shadow_offset_y)) {
shadow_offset_y = 0;
}
var format = artisan.interpretElement(target);
switch (format) {
case "CANVAS":
// Canvas
var context = artisan.findContext(target);
var this_image = new Image();
this_image.src = src;
this_image.style.opacity = alpha;
this_image.style.MozOpacity = alpha;
this_image.onload = function () {
context.shadowOffsetX = shadow_offset_x;
context.shadowOffsetY = shadow_offset_y;
context.shadowBlur = shadow_blur;
context.shadowColor = shadow_color;
context.strokeStyle = stroke_color;
context.fillStyle = fill_color;
context.drawImage(this_image, placex, placey, width, height);
};
break;
default:
// Standard Code
}
}
},
drawPath: function (target, path, line_width, line_color, fill_color, alpha) {
var targeted = document.getElementById(target);
var target_width = targeted.width;
var target_height = targeted.height;
var cp1x, cp1y, cp2x, cp2y, cur_x, cur_y;
var context = artisan.findContext(target);
if (!path) {
path = [[0, 0]];
}
line_width = artisan.interpretRequest(line_width, target_width);
fill_color = artisan.interpretColor(fill_color);
alpha = artisan.interpretAlpha(alpha);
line_color = artisan.interpretColor(line_color);
var starting_point_x = path[0][0];
starting_point_x = artisan.interpretRequest(starting_point_x, target_width);
var starting_point_y = path[0][1];
starting_point_y = artisan.interpretRequest(starting_point_y, target_height);
context.beginPath();
context.moveTo(starting_point_x, starting_point_y);
for (p = 1; p < path.length; p++) {
var point_x = path[p][0];
point_x = artisan.interpretRequest(point_x, target_width);
var point_y = path[p][1];
point_y = artisan.interpretRequest(point_y, target_height);
if (!path[p][2]) {
context.lineTo(point_x, point_y);
} else if (path[p][2] === 'bezier') {
cp1x = path[p][3];
cp1x = artisan.interpretRequest(cp1x, target_width);
cp1y = path[p][4];
cp1y = artisan.interpretRequest(cp1y, target_height);
cp2x = path[p][5];
cp2x = artisan.interpretRequest(cp2x, target_width);
cp2y = path[p][6];
cp2y = artisan.interpretRequest(cp2y, target_height);
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, point_x, point_y);
} else if (path[p][2] === 'quadratic') {
cp1x = cur_x + 2.0 / 3.0 * (path[p][3] - cur_x);
cp1x = artisan.interpretRequest(cp1x, target_width);
cp1y = cur_y + 2.0 / 3.0 * (path[p][4] - cur_y);
cp1y = artisan.interpretRequest(cp1y, target_height);
cp2x = cp1x + (point_x - cur_x) / 3.0;
cp2x = artisan.interpretRequest(cp2x, target_width);
cp2y = cp1y + (point_y - cur_y) / 3.0;
cp2y = artisan.interpretRequest(cp2y, target_height);
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, point_x, point_y);
}
cur_x = point_x;
cur_y = point_y;
}
if (line_width !== 0 && line_color !== '') {
line_width = artisan.analyzeValue(line_width, target_width);
context.lineWidth = line_width;
context.stroke();
}
if (fill_color !== '') {
context.fillStyle = fill_color;
context.fill();
}
context.closePath();
},
drawLine: function (target, start_x, start_y, end_x, end_y, line_width, line_color, type, cp1_x, cp1_y, cp2_x, cp2_y) {
var targeted = document.getElementById(target);
var target_width = targeted.width;
var target_height = targeted.height;
start_x = artisan.interpretRequest(start_x, target_width);
start_y = artisan.interpretRequest(start_y, target_height);
end_x = artisan.interpretRequest(end_x, target_width);
end_y = artisan.interpretRequest(end_y, target_height);
cp1_x = artisan.interpretRequest(cp1_x, target_width);
cp1_y = artisan.interpretRequest(cp1_y, target_height);
cp2_x = artisan.interpretRequest(cp2_x, target_width);
cp2_y = artisan.interpretRequest(cp2_y, target_height);
line_width = artisan.interpretRequest(line_width, target_width);
line_color = artisan.interpretColor(line_color);
var context = artisan.findContext(target);
context.beginPath();
context.moveTo(start_x, start_y);
if (!type) {
context.lineTo(end_x, end_y);
} else if (type === 'bezier') {
cp1_x = parseInt(cp1_x, 10);
cp1_y = parseInt(cp1_y, 10);
cp2_x = parseInt(cp2_x, 10);
cp2_y = parseInt(cp2_y, 10);
context.bezierCurveTo(cp1_x, cp1_y, cp2_x, cp2_y, end_x, end_y);
} else if (type === 'quadratic') {
cp1_x = start_x + 2.0 / 3.0 * (cp1_x - start_x);
cp1_y = start_y + 2.0 / 3.0 * (cp1_y - start_y);
cp2_x = cp1_x + (end_x - start_x) / 3.0;
cp2_y = cp1_y + (end_y - start_y) / 3.0;
cp1_x = parseInt(cp1_x, 10);
cp1_y = parseInt(cp1_y, 10);
cp2_x = parseInt(cp2_x, 10);
cp2_y = parseInt(cp2_y, 10);
context.bezierCurveTo(cp1_x, cp1_y, cp2_x, cp2_y, end_x, end_y);
}
if (line_width !== 0 && line_color !== '') {
context.strokeStyle = line_color;
context.lineWidth = line_width;
context.stroke();
}
},
closePath: function (target) {
var context = artisan.findContext(target);
context.closePath();
},
drawText: function (target, place_x, place_y, text, text_color, weight, size, font, align, alpha, line_width, line_color, baseline) {
var targeted = document.getElementById(target);
var target_width = targeted.width;
var target_height = targeted.height;
place_x = artisan.interpretRequest(place_x, target_width);
place_y = artisan.interpretRequest(place_y, target_height);
text_color = artisan.interpretColor(text_color);
alpha = artisan.interpretAlpha(alpha);
line_width = artisan.interpretRequest(line_width, target_width);
line_color = artisan.interpretColor(line_color);
if (!text) {
text = '';
}
if (!weight) {
weight = '';
}
if (size !== 'random' && size) {
size = artisan.analyzeValue(size, target_width) + 'px';
} else if (size === 'random') {
size = artisan.randomize(0, 190) + 'px';
} else if (!size) {
size = '15px';
}
if (!font) {
font = 'sans-serif';
}
var font_style = weight + ' ' + size + ' ' + font;
if (!align) {
align = 'left';
}
if (!baseline) {
baseline = 'top';
}
var context = artisan.findContext(target);
context.textAlign = align;
context.globalAlpha = alpha;
context.fillStyle = text_color;
context.font = font_style;
context.textBaseline = baseline;
context.fillText(text, place_x, place_y);
if (line_width !== 0) {
context.strokeText(text, place_x, place_y);
}
},
drawStack: function (target, stack, history) {
// This draws the stack to the targeted element
if (stack === 'latest') {
stack = stacks.length - 1;
} else if (!stack || isNaN(stack) || stack === 'first') {
stack = 0;
}
// Iterate through the layers
for (l = 0; l < stacks[stack].length; l++) {
// Iterate through the history
if (history === 'first' || history === 0) {
history = 0;
} else if (!history || isNaN(history) || history === 'latest') {
history = stacks[stack][l].length - 1;
}
artisan.drawLayer(target, stack, l, history);
}
},
drawLayer: function (target, stack, layer, history) {
// This draws the stack to the targeted element
if (!stack || isNaN(stack)) {
stack = 0;
}
if (layer === 'latest') {
layer = stacks[stack].length - 1;
} else if (!layer || isNaN(layer) || layer === 'first') {
layer = 0;
}
// Iterate through the history
if (history === 'previous') {
history = stacks[stack][layer].length - 2;
} else if (!history || isNaN(history) || history === 'latest') {
history = stacks[stack][layer].length - 1;
} else if (history === 'first' || history === 0) {
history = 0;
}
// Iterate through the steps of this history
current_history = [];
for (h = 0; h < stacks[stack][layer][history].length; h++) {
// do things, like render circles and whatnot.
var directive = stacks[stack][layer][history][h][0];
var information = stacks[stack][layer][history][h][1];
artisan.handleDirective(target, directive, information);
}
var old_history = stacks[stack][layer][history].toString();
var new_history = current_history.toString();
if (new_history !== old_history) {
stacks[stack][layer][history].push(current_history);
}
},
randomize: function (l, h) {
var generated = parseInt(l + (Math.random() * (h - l)), 10);
return generated;
},
convertToPercentage: function (value, maximum) {
var percentage = (100 / maximum) * value;
return percentage;
},
convertToPixels: function (value, maximum) {
var pixel = maximum * (value / 100);
return pixel;
},
rotateCanvas: function (target, amount) {
if (amount === 'reset') {
amount = global_rotate * -1;
} else if (amount === 'random') {
amount = artisan.randomize(-1, 360);
}
var context = artisan.findContext(target);
var div = 360 / amount;
global_rotate = global_rotate + amount;
if (global_rotate < 0) {
global_rotate = 360 - Math.abs(global_rotate);
} else if (global_rotate > 360) {
var diff = global_rotate - 360;
global_rotate = diff;
}
context.rotate((Math.PI * 2) / div);
},
clearCanvas: function (target) {
var targeted = document.getElementById(target);
var target_width = targeted.width;
var target_height = targeted.height;
var context = artisan.findContext(target);
context.clearRect(0, 0, target_width, target_height);
},
resetDefaults: function (context) {
context.globalAlpha = 1;
},
analyzeValue: function (measurement, scale_measure) {
var measurement = measurement.toString();
if (!!(measurement.match('%'))) {
// This is a percentage value
measurement = parseFloat(measurement);
measurement = artisan.convertToPixels(measurement, scale_measure);
} else if (!!(measurement.match('px'))) {
// This is a pixel value
measurement = parseInt(measurement);
} else {
// This is neither specified as pixel or percentage
measurement = parseInt(measurement);
}
return measurement;
},
interpretRequest: function (request, scale_measure) {
var num_check = parseInt(request);
if (request === 'random') {
request = artisan.randomize(0, scale_measure);
} else if (request === 'center') {
request = scale_measure / 2;
} else if (!request || isNaN(num_check)) {
request = 0;
} else {
request = artisan.analyzeValue(request, scale_measure);
}
return request;
},
interpretColor: function (request) {
if (request === null || !request) {
request = '';
} else if (request.constructor.toString().indexOf("Array") !== -1) {
var chosen = artisan.randomize(0, request.length);
request = request[chosen];
} else if (request === 'random') {
var chosen_fill = artisan.randomize(0, default_colors.length);
request = default_colors[chosen_fill];
} else {
request = request;
}
return request;
},
interpretAlpha: function (alpha) {
if (alpha) {
alpha = alpha.toString();
if (!!(alpha.match('%'))) {
alpha = parseFloat(alpha) / 100;
} else if (alpha === 'random') {
alpha = artisan.randomize(0, 100) / 100;
}
} else {
alpha = 1;
}
return alpha;
},
handleDirective: function (target, directive, information) {
switch (directive) {
case "circle":
// Circle
artisan.drawCircle(target, information[0], information[1], information[2], information[3], information[4], information[5], information[6], information[7], information[8], information[9], information[10], information[11], information[12]);
break;
case "rectangle":
// Rectangle
artisan.drawRectangle(target, information[0], information[1], information[2], information[3], information[4], information[5], information[6], information[7], information[8], information[9], information[10], information[11], information[12]);
break;
case "path":
// Path
artisan.drawPath(target, information[0], information[1], information[2], information[3], information[4], information[5], information[6], information[7], information[8], information[9], information[10], information[11], information[12]);
break;
case "image":
// Image
artisan.drawImage(target, information[0], information[1], information[2], information[3], information[4], information[5], information[6], information[7], information[8], information[9], information[10], information[11], information[12]);
break;
case "line":
// Image
artisan.drawLine(target, information[0], information[1], information[2], information[3], information[4], information[5], information[6], information[7], information[8], information[9], information[10], information[11], information[12]);
break;
case "text":
// Text
artisan.drawText(target, information[0], information[1], information[2], information[3], information[4], information[5], information[6], information[7], information[8], information[9], information[10], information[11], information[12]);
break;
default:
// Standard Code
}
}
};
})(this);
artisan.create.stack();
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 百度移动优化：PC页、H5页跳转适配最优方案
- 【HTML5】开发之meta标签的viewport使用说明
- H5不能少的功能-滑动分页
- Html5多浏览器支持情况
- html5学习 - canvas画图和清除图片
- HTML5摇一摇
- HTML5 上传文件极简示例
- 超酷震撼 HTML5/CSS3动画应用及源码
- html5跨域方法
- HTML5 Video/Canvas拍照初级
- HTML5表格基础语法
- 学习HTML5 canvas第一天
- HTML5 在canvas绘制一个矩形
- HTML5圆角框的一个“通知公告”页面
- 你必须知道的28个HTML5特征、窍门和技术
- HTML5自定义属性对象Dataset简介
- HTML5表单提交与PHP环境搭建
- HTML5 Drag and Drop
- HTML5 学习笔记 应用程序缓存
- HTML5 Canvas （二）