h5 canvas标签

来源：互联网发布：java之父有多牛编辑：程序博客网时间：2024/06/05 00:54

（developer.mozilla.org推荐去看方法）

创建canvas标签

canvas只是图形容器，必须用脚本来绘制图形

创建canvas

1、html代码

<canvas class="canvas" width="200px" height="200px"></canvas>

2、js代码（在html里引入js文件即可）

var CANVAS_WINDHT = 300, CANVAS_HEIGTH = 200;window.onload = function(){createCanvas();}function createCanvas() {document.body.innerHTML = "<canvas id=\"mycanvas\" width=\""+CANVAS_WINDHT+"\" height=\""+CANVAS_HEIGTH+"\"></canvas>"}

绘制图形

canvas元素本身没有绘图功能，所有绘制工作必须再js脚本内部完成

var CANVAS_WINDHT = 600, CANVAS_HEIGTH = 500;var mycanvas, context;window.onload = function(){createCanvas();drawRect();}function createCanvas() {document.body.innerHTML = "<canvas id=\"mycanvas\" width=\""+CANVAS_WINDHT+"\" height=\""+CANVAS_HEIGTH+"\"></canvas>"    mycanvas = document.getElementById("mycanvas");    content = mycanvas.getContext("2d");}//绘制图形方法function drawRect() {content.fillStyle = "coral";//此句更改图形颜色，默认为黑content.translate(200,200); //移动语句（如果旋转在移动前面，则不显示，移动语句在旋转前面则显示）content.rotate(30);//旋转角度content.scale(2,0.5);//缩放content.fillRect(0,0,200,200);}

绘制图片

var CANVAS_WINDHT = 600, CANVAS_HEIGTH = 500;var mycanvas, context;window.onload = function(){createCanvas();        drawimg();}function createCanvas() {document.body.innerHTML = "<canvas id=\"mycanvas\" width=\""+CANVAS_WINDHT+"\" height=\""+CANVAS_HEIGTH+"\"></canvas>"    mycanvas = document.getElementById("mycanvas");    content = mycanvas.getContext("2d");}//绘制图片function drawimg(){var img = new Image();img.onload = function() {content.drawImage(img,0,0);}img.src = "img/oneself.jpg";}

阅读全文

0 0