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. ：first ：first-child .first()和.get() .eq()

    :first .first()只匹配一个元素,而 :first-child 将为每个父元素匹配一个子元素 .get()得到的是dom 元素  $('li').get()没有参数返回一个数组 .eq() ...

  2. 第一个项目：Python pygame——外星人大战（心得）

    2018年12月,作为一个大学专业是物联网工程,毕业后在一家石油行业国企干了近三年,但内心依然有着一颗技术之心的我,通过一次偶然的机会(也许并不偶然),接触到了python.当时抱着玩一玩的心态开始通 ...

  3. C# 使用委托实现多线程调用窗体的四种方式（转）

    1.方法一:使用线程 功能描述:在用c#做WinFrom开发的过程中.我们经常需要用到进度条(ProgressBar)用于显示进度信息.这时候我们可能就需要用到多线程,如果不采用多线程控制进度条,窗口 ...

  4. Emacs的一些事情（与Vi的争议及使用）

    一年成为Emacs高手(像神一样使用编辑器)推荐文章 http://ftp.gnu.org/gnu/emacs/windows/http://blog.csdn.net/redguardtoo/art ...

  5. Django-models-迁移错误

    错误表现:数据表二次迁移时:django.db.utils.InternalError: (1138, 'Invalid use of NULL value') 错误原因:是因为二次修改了null值属 ...

  6. PHP 汉字数字互转（100以内）| 汉字转数字 | 数字转汉字

    <?php function numDatabase(){ $numarr =array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,2 ...

  7. JS一行代码，生成一个16进制随机颜色，简单粗暴。

    var color = '#'+ Math.random().toString(16).substr(-6); document.body.style.backgroundColor = color; ...

  8. Git将本地库内容推送到远程

    本地库与远程库的交互 1 .将本地库的内容推送到远程库 A.创建一个本地仓库 $ mkdir gitdemo B.初始化本地仓库 $ git init C.项目根目录下创建 .gitignore 文件 ...

  9. MySQL中int(M)和tinyint(M)数值类型中M值的意义

    在一开始接触MySQL数据库时,对于int(M)及tinyint(M)两者数值类型后面的M值理解是最多能够插入数据库中的值不能大于M: 后来工作后,也是一边学习一边使用,之后的理解是其中的M的意思是插 ...

  10. zuul网关Filter处理流程及异常处理

    本文转载自:https://blog.csdn.net/tianyaleixiaowu/article/details/77893822 上一篇介绍了java网关Zuul的简单使用,进行请求路由转发和 ...