html5的应用-图像裁剪效果图

来源：动视网责编：小采时间：2020-11-27 15:09:42

html5的应用-图像裁剪效果图

html5的应用-图像裁剪效果图:图像用html5怎么裁剪的，之后绘制的图形都会采用这个裁剪区域，要取消这个裁剪区域就需要用到保存恢复状态，下面有讲效果截图：代码：<!DOCTYPE html> <html> <head> <meta charset="utf-8">

推荐度：

点击下载本文 文档为doc格式

导读html5的应用-图像裁剪效果图:图像用html5怎么裁剪的，之后绘制的图形都会采用这个裁剪区域，要取消这个裁剪区域就需要用到保存恢复状态，下面有讲效果截图：代码：<!DOCTYPE html> <html> <head> <meta charset="utf-8">

图像用html5怎么裁剪的，之后绘制的图形都会采用这个裁剪区域，要取消这个裁剪区域就需要用到保存恢复状态，下面有讲

效果截图：

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
<script>
 // 图像裁剪：context.clip()

 // context.clip()只绘制封闭路径区域内的图像，不绘制路径外部图像，用的时候

 // 先创建裁剪区域

 // 再绘制图像（之后绘制的图形都会采用这个裁剪区域，要取消这个裁剪区域就需要用到保存恢复状态，下面有讲）

 // 给出圆形和星形的裁剪代码
 function createCircleClip(context) {
 context.beginPath();
 context.arc(200, 170, 100, 0, Math.PI * 2, true);
 context.closePath();
 context.clip();
 }

 function create5StarClip(context) {
 var n = 0;
 var dx = 200;
 var dy = 150;
 var s = 150;
 context.beginPath();
 var x = Math.sin(0);
 var y = Math.cos(0);
 var dig = Math.PI / 5 * 4;
 for (var i = 0; i < 5; i++) {
 var x = Math.sin(i * dig);
 var y = Math.cos(i * dig);
 context.lineTo(dx + x * s, dy + y * s);
 }
 context.closePath();
 context.clip();
 } 

	function draw() {
 var canvas = document.getElementById("mycanvas");
 if (canvas == null)
 return false;

 var context = canvas.getContext("2d");

 context.fillStyle = "black";
 context.fillRect(0, 0, 400, 300);
 image = new Image();
 image.src = "Image/html5.jpg"

 image.onload = function () {
 //圆形裁剪区
 //createCircleClip(context)
 //星形裁剪区
 create5StarClip(context);
 context.drawImage(image,0,0);
 }
 
	} 	

	window.onload=draw;
</script>
</head>
<body>
 <p id="p1"></p>
 <canvas id="mycanvas" width="1000" height="800">当前浏览器不支持canvas</canvas>
</body>
</html>

html5的应用-图像裁剪效果图

推荐度：

点击下载本文 文档为doc格式

标签：图片的图片使用

热门焦点

html5的应用-图像裁剪效果图

html5的应用-图像裁剪效果图

html5的应用-图像裁剪效果图

最新推荐

猜你喜欢

热门推荐