小编给大家分享一下HTML5 canvas切片Slicing的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ draw
小编给大家分享一下HTML5 canvas切片Slicing的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
drawImage 方法的第三个也是最后一个变种有8个新参数，用于控制做切片显示的。
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。其它8个参数最好是参照右边的图解，前4个是定义图像源的切片位置和大小，后4个则是定义切片的目标显示位置和大小。
切片是个做图像合成的强大工具。假设有一张包含了所有元素的图像，那么你可以用这个方法来合成一个完整图像。例如，你想画一张图表，而手上有一个包含所有必需的文字的 PNG 文件，那么你可以很轻易的根据实际数据的需要来改变最终显示的图表。这方法的另一个好处就是你不需要单独装载每一个图像。
说明
代码
<html>
<head>
<meta Http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var image = new Image();
image.onload = function(){
//将图片从0,0开始截取100x50的大小在canvas中的0,0位置显示,大小为200x100
ctx.drawImage(image,0,0,100,50,0,0,200,100);
}
image.src = '../image/a.jpg';
}
script>
<title>测试图像3title>
head>
<body onload="draw();" >
<canvas id="canvas" width="400" height="300">
</canvas>
body>
html>
效果
说明
鼠标移动到图片上，canvas中显示放大的部分图片，并且可以手动设置放大倍数，兼容IE和FF。重写event的代码是为了兼容FF，重写后使用event可以得到FF的事件对象。getAbsoluteTop方法获取某个控件距离body的上边距，这样再结合鼠标点击事件的坐标就可以得到点击事件相对于图片的坐标了，另外IE中还需要另外考虑滚动条的位置，可以用document.body.scrollTop获取。另外还有一个BUG，图片如果没有按照正常比例显示，则会出错，如过强制设定width和height，ctx.drawImage还是会按照坐标在原图片中对应的位置来计算。
代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script>
//重写event事件
function __firefox(){
HTMLElement.prototype.__defineGetter__("runtimeStyle", __element_style);
window.constructor.prototype.__defineGetter__("event", __window_event);
Event.prototype.__defineGetter__("srcElement", __event_srcElement);
}
function __element_style(){
return this.style;
}
function __window_event(){
return __window_event_constructor();
}
function __event_srcElement(){
return this.target;
}
function __window_event_constructor(){
if(document.all){
return window.event;
}
var _caller = __window_event_constructor.caller;
while(_caller!=null){
var _argument = _caller.arguments[0];
if(_argument){
var _temp = _argument.constructor;
if(_temp.toString().indexOf("Event")!=-1){
return _argument;
}
}
_caller = _caller.caller;
}
return null;
}
if(window.addEventListener){
__firefox();
}
script>
<script type="text/javascript">
var power = 2;
getAbsoluteTop = function(obj){
//获取指定元素左上角的纵坐标（相对于body）
var selfTop = 0;
var element = obj;
if(document.body.scrollTop){//在ie下有值,FF没有
selfTop = 0 - document.body.scrollTop;//消除IE下的滚动条的影响
}
while(element){
selfTop = selfTop + element.offsetTop;
element = element.offsetParent;
};
return selfTop;
}
getAbsoluteLeft = function(obj){
//获取指定元素左上角的纵坐标（相对于body）
var selfLeft = 0;
var element = obj;
if(document.body.scrollLeft){
selfLeft = 0 - document.body.scrollLeft;
}
while(element){
selfLeft = selfLeft + element.offsetLeft;
element = element.offsetParent;
};
return selfLeft;
}
function mouseover(e) {
document.getElementById("img1").onmousemove = function(e){}
}
以上是“HTML5 Canvas切片Slicing的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网html频道！
--结束END--
本文标题: HTML5 Canvas切片Slicing的示例分析
本文链接: https://www.lsjlt.com/news/92218.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
一口价域名售卖能注册吗？域名是网站的标识，简短且易于记忆，为在线用户提供了访问我们网站的简单路径。一口价是在域名交易中一种常见的模式，而这种通常是针对已经被注册的域名转售给其他人的一种方式。
一口价域名买卖的过程通常包括以下几个步骤：
1.寻找：买家需要在域名售卖平台上找到心仪的一口价域名。平台通常会为每个可售的域名提供详细的描述，包括价格、年龄、流
443px" 443px) https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294.jpg https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294-768x413.jpg 域名售卖 域名一口价售卖 游戏音频 赋值/切片 框架优势 评估指南 项目规模
官方手机版
微信公众号
商务合作
0