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. COM，SOM， QT, GObject, ObjectiveC

    COM,SOM, QT, GObject, ObjectiveC https://en.wikipedia.org/wiki/IBM_System_Object_Model#Comparison_of ...

  2. antd、react-router-dom v4 解决菜单和地址同步问题

    点击不同的菜单,右边内容做相应的变化. 不过,对于后退操作和刷新页面操作无效,左边菜单无法保持选中项高亮. 解决思路如下: Menu 用 seletedKeys 来决定哪项被选中.需要判断当前选前的路 ...

  3. Python应用场景 （转）

    Web应用开发 Python经常被用于Web开发.比如,通过mod_wsgi模块,Apache可以运行用Python编写的Web程序.Python定义了WSGI标准应用接口来协调Http服务器与基于P ...

  4. CentOS6.4 添加nginx系统服务

    简介: Nginx安装完成后默认不会注册为系统服务,所以需要手工添加系统服务脚本.在/etc/init.d目录下新建nginx文件,并更改权限其即可. 1.新建nginx文件 1.1.新建文件:vi ...

  5. 响应json去除参数值为空的参数-springboot配置

    1.添加jackson相关依赖 <!--jackson 开始--><dependency> <groupId>com.fasterxml.jackson.core& ...

  6. 信号滤波模块verilog代码---UNLOCK，LOCK状态机方式

    信号滤波模块verilog代码 `timescale 1ns / 1ps /////////////////////////////////////////////////////////////// ...

  7. 第一个NIOS II工程using Qsys-------Let Qsys Say Hello

    1.新建工程 2.添加原理图文件 注:似乎Nios II工程都需要涉及到原理图编程. 3.进入Qsys进行内核设计 注:启动Qsys后,系统已经为内核默认添加了一个组件clk_0. 4.设置时钟名字和 ...

  8. CentOS 7.4 初次手记：第二章 CentOS安装步骤

    第二章 CentOS安装步骤... 18 第一节 下载... 18 第二节 分区参考... 18 第三节 安装... 19 I Step 1:引导... 19 II Step 2:配置... 20 I ...

  9. QT使用SQLite

    在QT的widget中用tableview显示sqlite数据库表中的内容. 用QTcreator创建一个基于Widget类的窗口,再拖一个tableview到widget中,保存. 1.在widge ...

  10. intellij idea 快捷输出 main方法的规律

    今天偶然发现了IntelliJ中 创建main函数的快捷键,依次还有for循环,System.out.println(); 在编写代码的时候直接输入psv就会看到一个psvm的提示,此时点击tab键一 ...