1、图像简介
此功能可以用于图片合成或者制作背景等。目前仅可以在图像中加入文字(标准说明中并没有包含绘制文字的功能)、加入图片(如 PNG,GIF,JPEG等)、加入其他的canvas元素。
2、引入图像的步骤
1)获取JavaScript的Image对象或者其它的canvas元素。但不能是简单的image路径或url;
2)使用drawImage()函数绘制图形;
3、获取图像的方式
1)使用页面中存在的图片。通过ocument.images 、document.getElementsByTasName
、document.getElementById方法来获取页面内的图片;
2)使用其它的已经准备好的canvas元素。使用document.getElementsByTasName
或者document.getElementById方法来获取;
3)使用脚本创建新的Image对象。需要注意图片预加载的问题。
4)使用data:url引用图片。优点:减少图片连接数,图片变成了页面的一部分,不需要额外的请求服务器。缺点:图片无法缓存,增加页面的大小。
4、绘制图像的方法介绍
drawImage(image,x,y)--绘制简单图像
image:image对象或者canvas对象;
x,y:图像在画布中的起始坐标;
drawImage(image,x,y,width,height)--图像缩放
image:image对象或者canvas对象;
x,y:图像在画布中的起始坐标;
width:图像显示的宽度;
height:图像显示的高度;
drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)--图像切片
image:image对象或者canvas对象;
sx,sy:切片在图像源中的起始坐标;
sWidth,sHeight:
切片在图像源中的宽度和高度;
dx,dy:切片在目标中显示的起始坐标;
dWidth,dHeight: 切片在目标中相识的宽度和高度;
可以参考下面的图片:
5、绘图实例
代码实例如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.wraper {
position: relative;
float: left;
margin-left: 10px;
margin-top: 10px;
border: 1px solid orange;
}
</style>
<script type="text/javascript">
function draw(){
//简单的绘制图像(一)
var image = new Image();
image.src = "image/gateway-logo1.jpg";
var canvas1 = document.getElementById('test1');
if(canvas1.getContext){
var context = canvas1.getContext('2d');
context.drawImage(image,10,10);
}
//简单的绘制图像(二)
var can2 = document.getElementById('test2');
var image2 = new Image();
image2.onload = function(){
if(can2.getContext){
var cxt2 = can2.getContext('2d');
cxt2.drawImage(image2,0,10);
cxt2.strokeStyle = "rgba(0,0,200,1)";
cxt2.beginPath();
cxt2.moveTo(40,160);
cxt2.lineTo(50,100);
cxt2.lineTo(100,20);
cxt2.lineTo(130,150);
cxt2.lineTo(180,80);
cxt2.stroke();
}
};
image2.src = "image/XY.png";
//图像缩放
var image3_1 = new Image();
image3_1.src = "image/ac.jpg";
var image3_2 = new Image();
image3_2.src = "image/ac_2.jpg";
var can3 = document.getElementById('test3');
if(can3.getContext){
var cxt3 = can3.getContext('2d');
cxt3.drawImage(image3_1,5,5,90,90);
cxt3.drawImage(image3_2,100,100,90,90);
}
//图像切片
var can4 = document.getElementById('test4');
var image4 = new Image();
image4.onload = function(){
if(can4.getContext){
var cxt4 = can4.getContext('2d');
cxt4.drawImage(image4,620,175,100,170,50,10,100,180);
}
};
image4.src = "image/ac_2.jpg";
}
</script>
</head>
<body onload="draw();">
<canvas id="test1" width="200px" height="200px" class="wraper"></canvas>
<canvas id="test2" width="200px" height="200px" class="wraper"></canvas>
<canvas id="test3" width="200px" height="200px" class="wraper"></canvas>
<canvas id="test4" width="200px" height="200px" class="wraper"></canvas>
</body>
</html>
显示的效果:
- 大小: 37.4 KB
- 大小: 54.9 KB
- 大小: 13.3 KB
分享到:
相关推荐
Leaflet.Canvas-Markers-0.2.0 https://github.com/corg/Leaflet.Canvas-Markers
html2canvas 的 @1.0.0-rc.4 版本,兼容IOS13,npm install时候安装版本不对可以直接下载这个,选择dist内的js文件引入
html2canvas-1.0.0-rc.4版本
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
canvas绘制基础图形(canvas 气泡框 网格线 三角形 圆角矩形 箭头)1.初始化画布 initCanvas * 2.绘制网格线 drawGridlines * 3.绘制圆点 drawDot * 4.绘制圆环 drawRing
判断浏览器是否支持canvas,具体代码如下: 复制代码代码如下: <!DOCTYPE html> <head> <meta charset=utf-8 /> <title>canvas</title> [removed] [removed] = function(){ /**判断...
Android—BitMap与Canvas学习笔记
Canvas,Delphi中的画布,本压缩包中包含了四个特效,我也是从网上找的教程,但教程中有点小错误,也可能是有的站长复制粘贴时不小心哈,我研究了下教程后就直接做成了程序了。喜欢的朋友拿去。。。
asp-net-mvc-canvasjs-chart-samples,.NET的MVC图表组件
Canvas的实际使用--自定义搜索效果 资源博客地址:http://blog.csdn.net/wangwo1991/article/details/77940721
在canvas中当在canvas上写width和height时为canvas的实际画板大小,默认情况下width为300px,height为150px。 在style里面写css样式的时候widht和height为实际显示尺寸大小。 现在以用canvas画一个对角线为例: ...
wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ,导出图片,可用于生成分享图等场景
修改html2canvas.js源码,可以解决截图不全问题.使用方式参考 http://blog.csdn.net/q2365921/article/details/54377479
Android开发者学习笔记-View、Canvas、bitmap.pdf
Canvas:最基本的面板。仅支持用显示坐标定位元素。可以通过Left、Top、Right、Bottom附加属性在Canvas中定位元素,通过设置Left和Right属性值表示元素最靠近的那条边,应该与Canvas的左边缘或右边缘保持一个固定的...
前端项目-javascript-canvas-to-blob,javascript canvas to blob是一个将画布元素转换为blob对象的函数。
canvas-nest.js一个基于html5 canvas绘制的网页背景效果
canvas-js-动画-例子