HTML5中的Canvas绘图操作（三）
2012-08-19 14:39
369 查看
本节主要内容是组合图形的绘制。
简单的一个阴影绘制如下：
<!DOCTYPE html>
<html>
<head>
<title>Drawing Shadows</title>
<style type="text/css">
#Canvas1 {
border: dotted 1px black;
}
</style>
<script>
window.onload = function() {
var theCanvas = document.getElementById('Canvas1');
if (theCanvas && theCanvas.getContext) {
var ctx = theCanvas.getContext("2d");
if (ctx) {
// set up our basic shadow settings
ctx.shadowColor = "#000000";
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 10;
// draw a simple rectangle with a shadow effect
ctx.fillStyle = "rgba(0,0,255,1)";
ctx.fillRect(20,20,200,100);
var theString = "Drawing Text on a Canvas";
// draw the string with some font information
// change the shadow settings to be a bit lighter
ctx.fillStyle = "green";
ctx.shadowColor = "rgba(0,100,100,0.5)";
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 5;
ctx.font = "25pt Georgia";
ctx.fillText(theString, 250,75);
// draw a red line with a purplish shadow
ctx.lineCap="round";
ctx.lineWidth = 25;
ctx.shadowColor = "rgba(150,0,150,0.5)";
ctx.shadowBlur = 15;
ctx.shadowOffsetX = -15;
ctx.shadowOffsetY = -15;
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.moveTo(50,200);
ctx.lineTo(450,200);
ctx.stroke();
}
}
}
</script>
</head>
<body>
<h1>Drawing Shadows</h1>
<p>All drawing operations can produce shadows. This example shows how to make shadows on a variety of canvas operations.</p>
<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
</body>
</html>
实际上需要注意的主要是设置如下内容：
ctx.shadowColor = "rgba(150,0,150,0.5)";
ctx.shadowBlur = 15;
ctx.shadowOffsetX = -15;
ctx.shadowOffsetY = -15;
分别设置了阴影的颜色、污迹、偏移量；
下面是一个使用图案的例子：
<!DOCTYPE html>
<html>
<head>
<title>Drawing Patterns</title>
<style type="text/css">
#Canvas1 {
border: dotted 1px black;
}
</style>
<script>
window.onload = function() {
var theCanvas = document.getElementById('Canvas1');
if (theCanvas && theCanvas.getContext) {
var ctx = theCanvas.getContext("2d");
if (ctx) {
// create a pattern from another canvas
var patCanvas = document.getElementById('patCan');
var patCtx = patCanvas.getContext("2d");
// draw a line in the canvas
patCtx.strokeStyle = "red";
patCtx.lineWidth=1;
patCtx.beginPath();
patCtx.moveTo(0,0);
patCtx.lineTo(25,25);
patCtx.stroke();
// now use that canvas as a pattern
var strokePat = ctx.createPattern(patCanvas,"repeat");
ctx.strokeStyle = strokePat;
ctx.lineWidth = 25;
ctx.strokeRect(50,50,200,200);
}
}
}
</script>
</head>
<body>
<h1>Drawing Patterns</h1>
<p>Patterns can be created from images, videos, or even other canvas elements.</p>
<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
<canvas id="patCan" width="25" height="25"></canvas>
<video id="vidEl" src="video/podcast_teaser.mp4" controls style="display:none"></video>
</body>
</html>
另一个使用图案的例子，使用图像填充：
<!DOCTYPE html>
<html>
<head>
<title>Drawing Patterns</title>
<style type="text/css">
#Canvas1 {
border: dotted 1px black;
}
</style>
<script>
window.onload = function() {
var theCanvas = document.getElementById('Canvas1');
if (theCanvas && theCanvas.getContext) {
var ctx = theCanvas.getContext("2d");
if (ctx) {
// create a pattern from an image
var patImg = new Image();
patImg.onload = function() {
ctx.fillStyle = ctx.createPattern(patImg,"repeat");
ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);
}
patImg.src = "images/desert_desc_bug.gif";
}
}
}
</script>
</head>
<body>
<h1>Drawing Patterns</h1>
<p>Patterns can be created from images, videos, or even other canvas elements.</p>
<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
<canvas id="patCan" width="25" height="25"></canvas>
<video id="vidEl" src="video/podcast_teaser.mp4" controls style="display:none"></video>
</body>
</html>
使用渐变色，分别是直线式的渐变和辐射状的渐变，以下例子展示了其中的差别：
<!DOCTYPE html>
<html>
<head>
<title>Drawing Gradients</title>
<style type="text/css">
#Canvas1 {
border: dotted 1px black;
}
</style>
<script>
window.onload = function() {
var theCanvas = document.getElementById('Canvas1');
if (theCanvas && theCanvas.getContext) {
var ctx = theCanvas.getContext("2d");
if (ctx) {
// create a linear gradient
var linGrd = ctx.createLinearGradient(20,20,220,280);
// add some color stops: red to blue, blue to green
linGrd.addColorStop(0, "#f00"); // start with red at 0
linGrd.addColorStop(0.5, "#00f"); // put blue at the halfway point
linGrd.addColorStop(1,"#0f0"); // finish with green
// create a rectangle and fill it with the gradient
ctx.fillStyle = linGrd;
ctx.fillRect(20,20,200,260);
ctx.lineWidth = 3;
ctx.strokeRect(20,20,200,260);
// create a radial gradient
var radGrd = ctx.createRadialGradient(500,100,20,525,150,100);
radGrd.addColorStop(0, "#f00"); // start with red at 0
radGrd.addColorStop(0.5, "#00f"); // put blue at the halfway point
radGrd.addColorStop(1,"#0f0"); // finish with green
ctx.fillStyle = radGrd;
ctx.beginPath();
ctx.arc(525,150,100,0,2*Math.PI);
ctx.stroke();
ctx.fill();
}
}
}
</script>
</head>
<body>
<h1>Drawing Gradients</h1>
<p>The HTML5 Canvas supports two kinds of gradients - linear and radial.</p>
<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
</body>
</html>
主要涉及的函数如下：
createLinearGradient
createRadialGradient
addColorStop
图像的绘制例子：
<!DOCTYPE html>
<html>
<head>
<title>Drawing Images</title>
<style type="text/css">
#Canvas1 {
border: dotted 1px black;
}
</style>
<script type="text/javascript">
window.onload = function() {
var theCanvas = document.getElementById('Canvas1');
if (theCanvas && theCanvas.getContext) {
var ctx = theCanvas.getContext("2d");
if (ctx) {
// draw an image directly onto the canvas at the top left
var srcImg = document.getElementById("img1");
ctx.drawImage(srcImg, 0,0);
// draw the image scaled down onto the canvas
//ctx.drawImage(srcImg, 50,50,350,150);
// draw just a portion of the source image onto the canvas
//ctx.drawImage(srcImg, 350,200,125,100,50,50,125,100);
// draw the video onto the canvas. We need to set an interval function
// in order to grab each frame from the video and paint it onto the canvas.
//var srcVid = document.getElementById("vid1");
//srcVid.play();
//setInterval(function () {
//var theCanvas = document.getElementById('Canvas1');
//var ctx = theCanvas.getContext("2d");
//var srcVid = document.getElementById("vid1");
//ctx.drawImage(srcVid, 0,0);
//}, 16);
}
}
}
</script>
</head>
<body>
<h1>Drawing Images</h1>
<p>Images can be drawn directly onto a canvas element in a variety of ways. Your code can drawn an image
directly from an IMG or VIDEO element that is already in the page or loaded dynamically via script, or
another canvas element can be used as a source image.</p>
<canvas id="Canvas1" width="715" height="315">Your browser does not support canvas.</canvas>
<!-- source images used in this example -->
<img id="img1" src="images/emerald_bay.jpg" width="715" height="315" style="display:none;">
<video id="vid1" src="video/podcast_teaser.mp4" loop style="display:none"></video>
</body>
</html>
注意drawImage的三种形式：
drawImage(srcImg, dx,dy);
drawImage(srcImg, dx,dy,dw,dh);
drawImage(srcImg, sx,sy,sw,sh,dx,dy,dw,dh);
drawImage函数同样可以用于显示视频。
使用遮盖：
<!DOCTYPE html>
<html>
<head>
<title>Clipping Paths</title>
<style type="text/css">
#Canvas1 {
border: dotted 1px black;
}
</style>
<script>
window.onload = function () {
var theCanvas = document.getElementById('Canvas1');
if (theCanvas && theCanvas.getContext) {
var ctx = theCanvas.getContext("2d");
if (ctx) {
// draw an image
var srcImg = document.getElementById("img1");
// create a circle clipping path
ctx.arc(ctx.canvas.width / 2, ctx.canvas.height / 2, 150, 0, 2 * Math.PI);
ctx.clip();
/*
// create an arbitrary clipping path
ctx.beginPath();
ctx.moveTo(105, 200);
ctx.lineTo(250, 25);
ctx.lineTo(525, 50);
ctx.lineTo(475, 285);
ctx.closePath();
ctx.clip();
*/
ctx.drawImage(srcImg, 0, 0);
}
}
}
</script>
</head>
<body>
<h1>Clipping Paths</h1>
<p>Clipping paths restrict drawing to a particular area of the canvas. Think of clipping paths as masks -
areas where the mask is empty show through, while areas where the mask is opaque do not.</p>
<p>Any path can be a clipping path. You simply draw the path as normal and then call the context's clip()
function to create one.</p>
<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
<img id="img1" src="images/emerald_bay.jpg" width="715" height="315" style="display:none;">
</body>
</html>
简单的一个阴影绘制如下：
<!DOCTYPE html>
<html>
<head>
<title>Drawing Shadows</title>
<style type="text/css">
#Canvas1 {
border: dotted 1px black;
}
</style>
<script>
window.onload = function() {
var theCanvas = document.getElementById('Canvas1');
if (theCanvas && theCanvas.getContext) {
var ctx = theCanvas.getContext("2d");
if (ctx) {
// set up our basic shadow settings
ctx.shadowColor = "#000000";
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 10;
// draw a simple rectangle with a shadow effect
ctx.fillStyle = "rgba(0,0,255,1)";
ctx.fillRect(20,20,200,100);
var theString = "Drawing Text on a Canvas";
// draw the string with some font information
// change the shadow settings to be a bit lighter
ctx.fillStyle = "green";
ctx.shadowColor = "rgba(0,100,100,0.5)";
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 5;
ctx.font = "25pt Georgia";
ctx.fillText(theString, 250,75);
// draw a red line with a purplish shadow
ctx.lineCap="round";
ctx.lineWidth = 25;
ctx.shadowColor = "rgba(150,0,150,0.5)";
ctx.shadowBlur = 15;
ctx.shadowOffsetX = -15;
ctx.shadowOffsetY = -15;
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.moveTo(50,200);
ctx.lineTo(450,200);
ctx.stroke();
}
}
}
</script>
</head>
<body>
<h1>Drawing Shadows</h1>
<p>All drawing operations can produce shadows. This example shows how to make shadows on a variety of canvas operations.</p>
<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
</body>
</html>
实际上需要注意的主要是设置如下内容：
ctx.shadowColor = "rgba(150,0,150,0.5)";
ctx.shadowBlur = 15;
ctx.shadowOffsetX = -15;
ctx.shadowOffsetY = -15;
分别设置了阴影的颜色、污迹、偏移量；
下面是一个使用图案的例子：
<!DOCTYPE html>
<html>
<head>
<title>Drawing Patterns</title>
<style type="text/css">
#Canvas1 {
border: dotted 1px black;
}
</style>
<script>
window.onload = function() {
var theCanvas = document.getElementById('Canvas1');
if (theCanvas && theCanvas.getContext) {
var ctx = theCanvas.getContext("2d");
if (ctx) {
// create a pattern from another canvas
var patCanvas = document.getElementById('patCan');
var patCtx = patCanvas.getContext("2d");
// draw a line in the canvas
patCtx.strokeStyle = "red";
patCtx.lineWidth=1;
patCtx.beginPath();
patCtx.moveTo(0,0);
patCtx.lineTo(25,25);
patCtx.stroke();
// now use that canvas as a pattern
var strokePat = ctx.createPattern(patCanvas,"repeat");
ctx.strokeStyle = strokePat;
ctx.lineWidth = 25;
ctx.strokeRect(50,50,200,200);
}
}
}
</script>
</head>
<body>
<h1>Drawing Patterns</h1>
<p>Patterns can be created from images, videos, or even other canvas elements.</p>
<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
<canvas id="patCan" width="25" height="25"></canvas>
<video id="vidEl" src="video/podcast_teaser.mp4" controls style="display:none"></video>
</body>
</html>
另一个使用图案的例子，使用图像填充：
<!DOCTYPE html>
<html>
<head>
<title>Drawing Patterns</title>
<style type="text/css">
#Canvas1 {
border: dotted 1px black;
}
</style>
<script>
window.onload = function() {
var theCanvas = document.getElementById('Canvas1');
if (theCanvas && theCanvas.getContext) {
var ctx = theCanvas.getContext("2d");
if (ctx) {
// create a pattern from an image
var patImg = new Image();
patImg.onload = function() {
ctx.fillStyle = ctx.createPattern(patImg,"repeat");
ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);
}
patImg.src = "images/desert_desc_bug.gif";
}
}
}
</script>
</head>
<body>
<h1>Drawing Patterns</h1>
<p>Patterns can be created from images, videos, or even other canvas elements.</p>
<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
<canvas id="patCan" width="25" height="25"></canvas>
<video id="vidEl" src="video/podcast_teaser.mp4" controls style="display:none"></video>
</body>
</html>
使用渐变色，分别是直线式的渐变和辐射状的渐变，以下例子展示了其中的差别：
<!DOCTYPE html>
<html>
<head>
<title>Drawing Gradients</title>
<style type="text/css">
#Canvas1 {
border: dotted 1px black;
}
</style>
<script>
window.onload = function() {
var theCanvas = document.getElementById('Canvas1');
if (theCanvas && theCanvas.getContext) {
var ctx = theCanvas.getContext("2d");
if (ctx) {
// create a linear gradient
var linGrd = ctx.createLinearGradient(20,20,220,280);
// add some color stops: red to blue, blue to green
linGrd.addColorStop(0, "#f00"); // start with red at 0
linGrd.addColorStop(0.5, "#00f"); // put blue at the halfway point
linGrd.addColorStop(1,"#0f0"); // finish with green
// create a rectangle and fill it with the gradient
ctx.fillStyle = linGrd;
ctx.fillRect(20,20,200,260);
ctx.lineWidth = 3;
ctx.strokeRect(20,20,200,260);
// create a radial gradient
var radGrd = ctx.createRadialGradient(500,100,20,525,150,100);
radGrd.addColorStop(0, "#f00"); // start with red at 0
radGrd.addColorStop(0.5, "#00f"); // put blue at the halfway point
radGrd.addColorStop(1,"#0f0"); // finish with green
ctx.fillStyle = radGrd;
ctx.beginPath();
ctx.arc(525,150,100,0,2*Math.PI);
ctx.stroke();
ctx.fill();
}
}
}
</script>
</head>
<body>
<h1>Drawing Gradients</h1>
<p>The HTML5 Canvas supports two kinds of gradients - linear and radial.</p>
<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
</body>
</html>
主要涉及的函数如下：
createLinearGradient
createRadialGradient
addColorStop
图像的绘制例子：
<!DOCTYPE html>
<html>
<head>
<title>Drawing Images</title>
<style type="text/css">
#Canvas1 {
border: dotted 1px black;
}
</style>
<script type="text/javascript">
window.onload = function() {
var theCanvas = document.getElementById('Canvas1');
if (theCanvas && theCanvas.getContext) {
var ctx = theCanvas.getContext("2d");
if (ctx) {
// draw an image directly onto the canvas at the top left
var srcImg = document.getElementById("img1");
ctx.drawImage(srcImg, 0,0);
// draw the image scaled down onto the canvas
//ctx.drawImage(srcImg, 50,50,350,150);
// draw just a portion of the source image onto the canvas
//ctx.drawImage(srcImg, 350,200,125,100,50,50,125,100);
// draw the video onto the canvas. We need to set an interval function
// in order to grab each frame from the video and paint it onto the canvas.
//var srcVid = document.getElementById("vid1");
//srcVid.play();
//setInterval(function () {
//var theCanvas = document.getElementById('Canvas1');
//var ctx = theCanvas.getContext("2d");
//var srcVid = document.getElementById("vid1");
//ctx.drawImage(srcVid, 0,0);
//}, 16);
}
}
}
</script>
</head>
<body>
<h1>Drawing Images</h1>
<p>Images can be drawn directly onto a canvas element in a variety of ways. Your code can drawn an image
directly from an IMG or VIDEO element that is already in the page or loaded dynamically via script, or
another canvas element can be used as a source image.</p>
<canvas id="Canvas1" width="715" height="315">Your browser does not support canvas.</canvas>
<!-- source images used in this example -->
<img id="img1" src="images/emerald_bay.jpg" width="715" height="315" style="display:none;">
<video id="vid1" src="video/podcast_teaser.mp4" loop style="display:none"></video>
</body>
</html>
注意drawImage的三种形式：
drawImage(srcImg, dx,dy);
drawImage(srcImg, dx,dy,dw,dh);
drawImage(srcImg, sx,sy,sw,sh,dx,dy,dw,dh);
drawImage函数同样可以用于显示视频。
使用遮盖：
<!DOCTYPE html>
<html>
<head>
<title>Clipping Paths</title>
<style type="text/css">
#Canvas1 {
border: dotted 1px black;
}
</style>
<script>
window.onload = function () {
var theCanvas = document.getElementById('Canvas1');
if (theCanvas && theCanvas.getContext) {
var ctx = theCanvas.getContext("2d");
if (ctx) {
// draw an image
var srcImg = document.getElementById("img1");
// create a circle clipping path
ctx.arc(ctx.canvas.width / 2, ctx.canvas.height / 2, 150, 0, 2 * Math.PI);
ctx.clip();
/*
// create an arbitrary clipping path
ctx.beginPath();
ctx.moveTo(105, 200);
ctx.lineTo(250, 25);
ctx.lineTo(525, 50);
ctx.lineTo(475, 285);
ctx.closePath();
ctx.clip();
*/
ctx.drawImage(srcImg, 0, 0);
}
}
}
</script>
</head>
<body>
<h1>Clipping Paths</h1>
<p>Clipping paths restrict drawing to a particular area of the canvas. Think of clipping paths as masks -
areas where the mask is empty show through, while areas where the mask is opaque do not.</p>
<p>Any path can be a clipping path. You simply draw the path as normal and then call the context's clip()
function to create one.</p>
<canvas id="Canvas1" width="700" height="300">Your browser does not support canvas.</canvas>
<img id="img1" src="images/emerald_bay.jpg" width="715" height="315" style="display:none;">
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5中的Canvas绘图操作（四）
- HTML5中的Canvas绘图操作（五）
- HTML5中的Canvas绘图操作（二）
- HTML5中的Canvas绘图操作（一）
- [HTML5-SVG,VML,CANVAS]Web开发中的矢量绘图(vml,svg)处理和应用
- HTML5学习(四)---Canvas绘图
- html5-Canvas绘图
- HTML5 canvas绘图基本使用方法
- HTML5 Canvas 开发 绘图方法整理 【一、需要了解的基础内容】
- HTML5 Canvas 开发 绘图方法整理 【六、canvas image /canvas绘制图片、平铺图片】
- HTML5绘图之Canvas标签 绘制坐标轴
- HTML5 Canvas 绘图方法整理 【十七、Canvas透明度 / 图形叠加、层次、冲突】
- HTML5通过调用canvas对象的getContext()方法来获取绘图环境
- HTML5 Canvas绘图之文字的渲染
- HTML5 学习（二 CANVAS 的基本操作 【JavaScript绘制】）
- 自定义控件之绘图篇（四）：canvas变换与操作
- HTML5 canvas绘图制作打击视频玻璃破碎动画效果
- 关于RGraph（html5 canvas ）绘图
- HTML5 Canvas 开发 绘图方法整理 【二、canvas直线 & canvas矩形】
- 6.HTML5 Canvas 绘图-2