下面是编程之家 jb51.cc 通过网络收集整理的代码片段。
编程之家小编现在分享给大家，也给大家做个参考。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
//Global variables
var myImage =
new Image(); // Create a new blank image.
// Load the image and display it.
function displayImage() {
//
Get the canvas element.
canvas = document.getElementById("myCanvas");
// Make sure you got it.
if (canvas.getContext) {
// Specify 2d canvas type.
ctx = canvas.getContext("2d");
// When the image is loaded,draw it.
myImage.onload =
function() {
// Load the image into the context.
ctx.drawImage(myImage,0);
//
Get
and modify the image data.
changeImage();
}
// Define the source of the image.
myImage.src =
"http://samples.msdn.microsoft.com/workshop/samples/canvas/kestral.png";
}
}
function changeImage() {
ctx.strokeStyle =
"white";
ctx.lineWidth =
"100";
ctx.beginPath();
ctx.arc(100,100,150,Math.PI *
2,true);
ctx.closePath();
ctx.stroke();
}
</script>
</head>
<body onload="displayImage()">
<h1>
American Kestral
</h1>
<p>
The original image is
on the left
and the modified image is
on the right.
</p>
<img id="myPhoto" src="http://samples.msdn.microsoft.com/workshop/samples/canvas/kestral.png">
<canvas id="myCanvas" width="200" height="200">
</canvas>
<p>
Public domain image courtesy of U.S. Fish and Wildlife Service.
</p>
</body>
</html>
以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。
如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。
原文链接：https://www.f2er.com/html/457413.html