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);

Html5——canvas标签使用的更多相关文章

  1. HTML5 canvas标签绘制正三角形 鼠标按下点为中间点，鼠标抬起点为其中一个顶点

    用html5的canvas标签绘制圆.矩形比较容易,绘制三角形,坐标确定相当于前面两种难点,这里绘制的是正三角形,比较容易,我们只需要把鼠标刚按下去的点设置为三角形的中心点,鼠标抬起的点设置为三角形右 ...

  2. HTML5<canvas>标签:使用canvas元素在网页上绘制线条和圆(1)

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  3. HTML5<canvas>标签:简单介绍(0)

    <canvas> 标签是 HTML 5 中的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件, 其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读<html5与c ...

  4. html5 canvas标签

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. HTML5<canvas>标签:使用canvas元素在网页上绘制渐变和图像(2)

    详细解释HTML5 Canvas中渐进填充的参数设置与使用,Canvas中透明度的设置与使用,结合渐进填充与透明度支持,实现图像的Mask效果. 一:渐进填充(Gradient Fill) Canva ...

  6. html5 canvas 标签

    <canvas id="board" width="500" height="400"></canvas> < ...

  7. HTML5<canvas>标签:使用canvas元素在网页上绘制四分之一圆(3)

    前几天自己做了个四分之一的圆,放到手机里面测试.效果不是很好.于是今天通过查资料,找到了canvas.自己研究了一天,发现可以使用canvas画圆.代码如下: <!doctype html> ...

  8. 自己写的HTML5 Canvas + Javascript五子棋

    看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这 ...

  9. html5 canvas 实现简单的画图

    今天早上看了一下 canvas 前端画图,数据可视化, 百度的 echart.js  , d3等 js 库都已经提供了强大的绘制各种图形的 API. 下面记录一下 有关canvas 绘图的基本知识: ...

随机推荐

  1. mysql-sql语言参考

    字段去重查询 select distinct style from music 批量修改某字段 update music set style = "ost"  where styl ...

  2. python之路---06 小数据池 编码

    二十二.小数据池, id()    进行缓存 1.小数据池针对的是: int, str, bool 2.在py文件中几乎所有的字符串都会缓存.   在cmd命令窗口中几乎都不会缓存   不同的解释器有 ...

  3. ML（4）——逻辑回归

    Logistic Regression虽然名字里带“回归”,但是它实际上是一种分类方法,“逻辑”是Logistic的音译,和真正的逻辑没有任何关系. 模型 线性模型 由于逻辑回归是一种分类方法,所以我 ...

  4. 在linux环境下，php语法出错，怎样让php编译后提示编译错误，错误在哪？

    如果不具备修改php.ini的权限,可以如下:ini_set("display_errors", "On"); error_reporting(E_ALL |  ...

  5. 使用JMeter进行RESTful API测试

    使用JMeter进行RESTful API测试 在哪里设置实现最优脚本重用的属性 由于支持云的应用程序通常可以轻松.快速地进行复制和部署,所以可以在多种环境中对其进行测试.如果您需要在多个环境中测试和 ...

  6. JavaScript 继承总结

    http://blog.csdn.net/yincheng01/article/details/6841953 Metro C++ http://www.cnblogs.com/michaelxu/a ...

  7. 【转】基于keras 的神经网络股价预测模型

    from matplotlib.dates import DateFormatter, WeekdayLocator, DayLocator, MONDAY,YEARLY from matplotli ...

  8. socket 断线重连

    send发送数据时,发送失败,进行如下重连处理: ) < )//serbuf中有数据可以发送才会执行这条语句 { printf("serial to tcp send msg erro ...

  9. Windows Server 2016 禁止自动更新后重启

    管理员运行cmd 输入Sconfig, 选择5,选择m

  10. 关于namespace的使用

    #include <string> #include <pcl/io/pcd_io.h> #include <pcl/point_types.h> int main ...