html5 canvas word,HTML5 Canvas

朴灿烈づ我的快乐病毒、 2022-10-07 12:47 192阅读 0赞

Canvas 转为图片

我们可以使用 Canvas2image 库将 canvas 转换为图片。

使用方式如下：

Canvas2Image.saveAsImage(canvasObj, width, height, type)

Canvas2Image.saveAsPNG(canvasObj, width, height)

Canvas2Image.saveAsJPEG(canvasObj, width, height)

Canvas2Image.saveAsGIF(canvasObj, width, height)

Canvas2Image.saveAsBMP(canvasObj, width, height)

Canvas2Image.convertToImage(canvasObj, width, height, type)

Canvas2Image.convertToPNG(canvasObj, width, height)

Canvas2Image.convertToJPEG(canvasObj, width, height)

Canvas2Image.convertToGIF(canvasObj, width, height)

Canvas2Image.convertToBMP(canvasObj, width, height)

测试实例：

var canvas, ctx, bMouseIsDown = false, iLastX, iLastY,

$save, $imgs,

$convert, $imgW, $imgH,

$sel;

function init () \{

canvas = document.getElementById('cvs');

ctx = canvas.getContext('2d');

$save = document.getElementById('save');

$convert = document.getElementById('convert');

$sel = document.getElementById('sel');

$imgs = document.getElementById('imgs');

$imgW = document.getElementById('imgW');

$imgH = document.getElementById('imgH');

bind();

draw();

\}

function bind () \{

canvas.onmousedown = function(e) \{

bMouseIsDown = true;

iLastX = e.clientX - canvas.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft);

iLastY = e.clientY - canvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop);

\}

canvas.onmouseup = function() \{

bMouseIsDown = false;

iLastX = -1;

iLastY = -1;

\}

canvas.onmousemove = function(e) \{

if (bMouseIsDown) \{

var iX = e.clientX - canvas.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft);

var iY = e.clientY - canvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop);

ctx.moveTo(iLastX, iLastY);

ctx.lineTo(iX, iY);

ctx.stroke();

iLastX = iX;

iLastY = iY;

\}

\};

$save.onclick = function (e) \{

var type = $sel.value,

w = $imgW.value,

h = $imgH.value;

Canvas2Image.saveAsImage(canvas, w, h, type);

\}

$convert.onclick = function (e) \{

var type = $sel.value,

w = $imgW.value,

h = $imgH.value;

$imgs.appendChild(Canvas2Image.convertToImage(canvas, w, h, type))

\}

\}

function draw () \{

ctx.fillStyle = '\#ffffff';

ctx.fillRect(0, 0, 600, 400);

ctx.fillStyle = 'red';

ctx.fillRect(100, 100, 50, 50);

\}

FK

FK

429\*\*\*967@qq.com3年前 (2018-11-29)

发表评论取消回复

表情：

评论列表（有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5 Canvas

Canvas画布描述获取方式注意点画布API 上下文API 颜色、样式和阴影线条样式

落日映苍穹つ/ 2023年01月10日 13:13/ 0 赞/ 105 阅读

相关 HTML5：Canvas 标签

什么是 canvas？ H5 `<canvas>` 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成。`<canvas>` 标签只是图形容器，必须使用脚本

逃离我推掉我的手/ 2022年10月11日 13:33/ 0 赞/ 230 阅读

相关 html5 canvas word,HTML5 Canvas

Canvas 转为图片我们可以使用 Canvas2image 库将 canvas 转换为图片。使用方式如下： Canvas2Image.saveAsImage(can

朴灿烈づ我的快乐病毒、/ 2022年10月07日 12:47/ 0 赞/ 193 阅读

相关 html5canvas网格制作,HTML5 Canvas网格变换

JavaScript 语言： JaveScriptBabelCoffeeScript 确定 (function() \{ var TriangleGrid, anim

╰+攻爆jí腚メ/ 2022年10月06日 13:50/ 0 赞/ 178 阅读

相关 HTML5canvas元素

一、canvas基础知识 1.简介：canvas元素是H5中的一个图形容器，它本身不具备任何行为使用者必须把它与脚本结合起来绘制图形。 2.canvasAPI：使用ca

男娘i/ 2022年07月30日 16:25/ 0 赞/ 207 阅读

相关 HTML5 canvas

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

冷不防/ 2022年07月19日 11:48/ 0 赞/ 203 阅读

相关 html5＜canvas基础＞

<!DOCTYPE html> <html> <head> <style> canvas\{

﹏ヽ暗。殇╰゛Y/ 2022年06月15日 07:24/ 0 赞/ 237 阅读

相关 HTML5Canvas

Canvas -> 做游戏：白鹭引擎、trees... 动画图表、频谱画图 HTML5 不只是单纯HTML 本身是一个标签 <canvas></canva

素颜马尾好姑娘i/ 2022年06月10日 05:19/ 0 赞/ 235 阅读

相关【HTML5】——Canvas

Canvas是HTML5中所有新特性中目前应用最广泛的一个，可以替代引入的图片（图形）用途：完成HTML页面中的图形绘制，实现网络游戏或单击游戏（网页游戏），在HTML中

曾经终败给现在/ 2022年06月07日 03:44/ 0 赞/ 297 阅读

相关 HTML 5 Canvas学习

HTML 5 Canvas 学习一、认识canvas 二、在Canvas上画线三、在canvas中绘制

Myth丶恋晨/ 2022年05月21日 00:05/ 0 赞/ 192 阅读