HTML5 Canvas API中drawImage()方法的使用实例

发布时间：2020-03-13 11:34:10 所属栏目：MySql教程来源：站长网

导读：这篇文章主要介绍了HTML5 Canvas API中drawImage()方法的使用实例,drawImage()方法主要用来对图像进行缩放或裁剪,文中给出了其坐标及相关参数的用法,需要的朋友

#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }

</style>

</head>

<body>

你的浏览器居然不支持Canvas？！赶快换一个吧！！

</canvas>

</div>

window.onload = function(){

var canvas = document.getElementById("canvas");

canvas.width = 800;

canvas.height = 600;

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

context.fillStyle = "#FFF";

context.fillRect(0,0,800,600);

context.beginPath();

context.moveTo(400,260);

context.bezierCurveTo(450,220,450,300,400,315);

context.bezierCurveTo(350,300,350,220,400,260);

context.clip();

context.closePath();

var img = new Image();

img.src = "./images/20-1.jpg";

img.onload = function(){

context.drawImage(img,348,240,100,100);

}

};

</script>

</body>

</html>

运行结果：

2016325103713253.jpg (300×286)

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!