正文

Html5——canvas标签使用

IP云
IP云V管理员/3 阅读
12/02
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成 

<script type="text/javascript">

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

</script>

1、JavaScript 使用 id 来寻找 canvas 元素： 

var c=document.getElementById("myCanvas");

2、创建 context 对象： 

var cxt=c.getContext("2d");

getContext("2d") 对象是内建的 HTML5 对象 ，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

3、下面的两行代码绘制一个红色的矩形： 

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

实例：

1、绘制圆形

arc (cx,cy,radius,start_angle,end_angle,direction);cx  水平坐标cy  垂直坐标radius  圆心start-angel  圆周起始位置  （下面配图详细解释）end_angle  弧长 Math.PI是半圆  Math.PI*2是整个圆  0.5为四分之一direction 顺、逆时针  false为逆时针，true为顺时针（决定了圆弧的方向）

<!DOCTYPE html>
<html>
<head>
<title>canvas_arc 圆形</title>
<style type="text/css">
body {
text-align: center;
}
#myCanvas {
width: 1000px;
height: 500px;
border: 2px dotted blue;
}
</style>
<!--只有宽高大概这个比例（2:1）时才是圆形-->
</head>

<body>
<canvas id="myCanvas">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var cv=document.getElementById("myCanvas");
var cvs=cv.getContext("2d");
cvs.fillStyle="#FF0000";//cvs.fillStyle="blue";设置填充色
cvs.beginPath();
cvs.arc(70,18,15,0,Math.PI*2,true);//水平坐标、垂直坐标、圆心、圆周起始位置、弧长（Math.PI是半圆  Math.PI*2是整个圆  0.5为四分之一）、 false为逆时针，true为顺时针（决定了圆弧的方向）
cvs.closePath();
cvs.fill();
</script>

</body>
</html>

2、绘制多边形

<!DOCTYPE html>
<html>
<head>
<title>canvas_line</title>
<style type="text/css">
#myCanvas {
width: 200px;
height: 100px;
border: 2px solid blue;
}
</style>

</head>

<body>
<p>绘制直线</p>
<canvas id="myCanvas">
Your browser does not support the canvas element;
</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var cvs = c.getContext("2d");//创建canvas对象，getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
cvs. moveTo (50, 20);
cvs. lineTo (150, 50);
cvs.lineTo(10, 50);
//cvs.lineTo(50,20);
cvs.stroke();//必须有
</script>
</body>
</html>

3、绘制矩形

<!DOCTYPE html>
<html>
<head>
<title>canvas_rect 绘制矩形</title>
<!--html5 中center报错-->
<style type="text/css">
body {
text-align: center;
}

#myCanvas {
width: 300px;
height: 300px;
border: 2px dotted red;
}
</style>
</head>

<body>
<p>canvas 绘制矩形</p>
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var can = document.getElementById("myCanvas");
var cvs=can.getContext("2d");
cvs. fillStyle ="#FF0000";
cvs. fillRect (2,2,268,75);
</script>
</body>
</html>

4、获得鼠标滑过坐标

<!DOCTYPE html>
<html>
<head>
<title>canvas绘画 获取鼠标移过坐标</title>
<style type="text/css">
#coorDiv {
float: left;
width: 199px;
height: 99px;
border: 2px solid blue;
margin-right: 10px;
}
</style>
<script type="text/javascript">
function canvas_getCoordinates(e) {
x = e.clientX;
y = e.clientY;
document.getElementById("xyCoordinates") .innerHTML = "Coordinates:("
+ x + "," + y + ")";
}
function canvas_clearCoordinates() {
document.getElementById("xyCoordinates").innerHTML = "";
}
</script>
</head>

<body style="margin: 10px;">
<p>把鼠标悬停在下面的矩形上会看到坐标：</p>
<div id="coorDiv" onmouseover="canvas_getCoordinates(event)"
onmouseout="canvas_clearCoordinates()"
onmousemove="canvas_getCoordinates(event)"></div>
<br>
<br>
<div id="xyCoordinates"></div>
</body>
</html>

5、绘制背景渐变

定义和用法

createLinearGradient() 方法 创建线性的渐变对象。

渐变可用于填充矩形、圆形、线条、文本等等。

提示： 请使用该对象作为 strokeStyle 或 fillStyle 属性的值。

提示： 请使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色。

JavaScript 语法： context .createLinearGradient( x0,y0,x1,y1 );

参数值

参数 描述
x0 渐变开始点的 x 坐标
y0 渐变开始点的 y 坐标
x1 渐变结束点的 x 坐标
y1 渐变结束点的 y 坐标

<!DOCTYPE html>
<html>
<head>
<title>canvas_jianbian绘制渐变背景</title>
<style type="text/css">
body {
text-align: center;
}

#myCanvas {
width: 200;
height: 100;
border: 2px dotted blue;
}
</style>
</head>
<body>
<canvas id="myCanvas">
Your browser does not support the canvas element;
</canvas>
<script type="text/javascript">
var cv = document.getElementById("myCanvas");
var cvs = cv.getContext("2d");
var cld = cvs. createLinearGradient (0, 0, 175, 50);//方法创建线性的渐变对象
cld. addColorStop (0, "blue");//#FF0000
cld. addColorStop (1, "red");//#00FF00

//矩形填充
cvs.fillStyle = cld;
cvs.fillRect(10, 10, 175, 50);//左上角起点坐标、长、宽
</script>
</body>
</html>

定义一个渐变（从上到下）作为矩形的填充样式：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx. createLinearGradient (0,0,0,170);
my_gradient.addColorStop( 0 ,"black");
my_gradient.addColorStop( 1 ,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

定义一个 从黑到红再到白的渐变 ，作为矩形的填充样式：

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop( 0 ,"black");
my_gradient.addColorStop( 0.5 ,"red");
my_gradient.addColorStop( 1 ,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
6、把一幅图像放置到画布上：

<!DOCTYPE html>
<html>
<head>
<title>canvas_image把图像放置到画布上</title>

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">

</script>
<script src="../js/jquery-1.7.2.js"></script>
<style type="text/css">
body {
text-align: center;
}

#myCanvas {
width: 600;
height: 500;
border: 2px solid blue;
}
</style>
</head>

<body>
<br>
<canvas id="myCanvas">
Your browser does not support the canvas element;
</canvas>
<script type="text/javascript">
var cv = $("#myCanvas")[0] ;//document.getElementById("myCanvas");
var cvs = cv.getContext("2d");
var img = new Image();
img.src = "../images/dog.bmp";
cvs. drawImage (img, 10, 0,100,100); //左上角坐标、宽高
</script>

</body>
</html>

每 20 毫秒，代码就会绘制视频的当前帧 

var v=document.getElementById("video1");

var c=document.getElementById("myCanvas");

ctx=c.getContext('2d');

v.addEventListener('play',function() {var i=window.setInterval(function() //不停的调用相关函数

{ctx.drawImage(v,0,0,270,135)},20);},false);

v.addEventListener('pause',function() {window.clearInterval(i);},false);

v.addEventListener('ended',function() {clearInterval(i);},false);

相关阅读

目录[+]