HTML5画布（图像）

案例1：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script>window.onload=function(){var c=document.getElementById("myCanvas");var cxt= c.getContext("2d");var image= new Image();image.src="shanchu.png";cxt.drawImage(image,0,0);}</script>
</head>
<body>
<canvas id="myCanvas" width="450" height="350" style="border: 1px solid #dddddd">您的浏览器不支持
</canvas></body>
</html>

注释：

（1）绘制图像时，需要使用drawImage方法：

方法1：cxt.drawImage(image,x,y);

image是一个Image对象，用该对象来装载图像文件。x与y为绘制时该图像在画布中的起始坐标。

方法2：cxt.drawImage(image,x,y,w,h);

前三个参数同上，w,h是指绘制时的图像的宽度与高度。

方法3：cxt.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);

sx与sy分别表示源图像的被复制区域在画布中的起始横坐标与起始纵坐标，sw与sh表示被复制区域的宽度与高度，dx与dy表示复制后的目标图像在画布中的起始横坐标与起始纵坐标，dw与dh表示复制后的目标图像的宽度与高度。该方法可以只复制图像的局部，只要将sx与sy设为局部区域的起始点坐标，将sw与sh设为局部区域的宽度与高度就可以了。

案例2：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script>window.onload=function(){var c=document.getElementById("myCanvas");var cxt= c.getContext("2d");var image= new Image();image.src="shanchu.png";cxt.drawImage(image,0,0,200,200);cxt.drawImage(image,0,0,100,100,210,0,200,200);}</script>
</head>
<body>
<canvas id="myCanvas" width="450" height="350" style="border: 1px solid #dddddd">您的浏览器不支持
</canvas></body>
</html>

效果图：

案例3：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script>window.onload=function(){var c=document.getElementById("myCanvas");var cxt= c.getContext("2d");var image= new Image();image.src="shanchu.png";drawImage(cxt,image);}function drawImage(cxt,image){var i=0;for(i=0;i<5;i++){cxt.drawImage(image,0+i*50,0+i*30,100,100);}}</script>
</head>
<body>
<canvas id="myCanvas" width="450" height="350" style="border: 1px solid #dddddd">您的浏览器不支持
</canvas></body>
</html>效果图：

图像平铺

案例1：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script>window.onload=function(){var c=document.getElementById("myCanvas");var cxt= c.getContext("2d");var image= new Image();image.src="shanchu.png";var ptrn=cxt.createPattern(image,'repeat');cxt.fillStyle=ptrn;cxt.fillRect(0,0,450,350);}</script>
</head>
<body>
<canvas id="myCanvas" width="450" height="350" style="border: 1px solid #dddddd">您的浏览器不支持
</canvas></body>
</html>

效果图：

注释：
（1）cxt.createPattern(image,type);该方法使用两个参数，image参数为要平铺的图像，type参数的值必须是下面的字符串值之一：no-repeat：不平铺repeat-x：横方向平铺repeat-y：纵方向平铺repeat：全方向平铺

HTML5画布（图像）相关推荐

php 画布插入图像,javascript – 如何在PHP中将html5画布图像保存到数据库
您提供的信息很少,但这里简要介绍了您需要的流程. 有关如何从客户端到数据库获取设计信息的完整描述超出了Stackoverflow讨论的范围,但此示例应该让您从所涉及的概念开始. 将画布转换为image ...
html5图片比例控制,按比例调整图像大小以适应HTML5画布
我正在尝试编写一个jQuery插件,该插件将具有与Zazzle.com上基于Flash的产品编辑器类似的功能.我需要知道的是,使用context.drawImage()画布功能,我可以插入图像并调整其 ...
html5 图形化操作,HTML5的图像及动画图形操作-20210525222751.ppt-原创力文档
第5章 HTML5的图像及动画 5.1 canvas元素 5.3 图形操作 5.2 使用路径画图 5.4 图像操作 5.5 canvas其他操作 5.6 制作动画 5.7 上机实践--绘制时钟 5.3 ...
HTML5画布(CANVAS)速查简表
>HTML5画布(Canvas)元素 <canvas id="myCanvas" width="500" height="300" ...
html5数据提交到mysql,保存html5画布作为数据到mysql数据库
这可能是不可能的,它只是非常适合我的情况.我使用html5画布作为幻灯片演示者,用户可以使用它并将其保存到本地机器上.保存html5画布作为数据到mysql数据库我的目标是改为以某种不同的方式将其保 ...
表盘时针的html代码,html5画布操作的简单学习-简单时钟
html5画布操作的简单学习-简单时针效果图一.什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. ...
HTML5如何添加图片遮罩,带有HTML5画布的putImageData的遮罩？
我想从现有的图像中采取不规则形状的部分,并使用HTML5画布将其呈现为Javascript中的新图像.因此,只有多边形边界内的数据才会被复制.我提出的方法包括:带有HTML5画布的putImageDa ...
html5无法绘制线条,Html5画布 - 使用fabric.js绘制完美线条或不使用
我正在创建一个游戏,我需要在不同类型的屏幕分辨率和缩放下实现HTML5上的完美画布线.Html5画布 - 使用fabric.js绘制完美线条或不使用很容易理解我说的,简单地粘贴在两个不同的代码转换成 ...
html页面矩形,HTML5画布（矩形）
canvas元素用于绘制图形. canvas元素是HTML5中新增的一个重要元素,元素本身是没有绘图能力,所有的绘制工作必须在javascript内部完成. 案例1: function draw(){ ...
php 图片放大镜,详解html5实现图像局部放大镜（可调节）（图文）
下面继续介绍基于html5画布canvas的放大镜效果: 主要步骤: 1)图像的加载,上篇blog里有www.php.cn/html5-tutorial-358646.html,必须注意apache的 ...

HTML5画布（图像）

HTML5画布（图像）相关推荐

最新文章

热门文章