html画布Canvas的使用
-
canvas是html5中新增加的元素，用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
-
< canvas> 标签只是图形容器，必须使用脚本来绘制图形。
-
可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。
使用步骤：
1.创建画布：
注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> 您的浏览器不支持 HTML5 canvas 标签。</canvas>
2.用JavaScript来绘制图像
- 首先，找到 < canvas > 元素：
var c = document.getElementById("myCanvas");
- 创建 context 对象：
getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
var ctx = c.getContext("2d");
- 下面的两行代码绘制一个红色的矩形：
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>willow</title>
<style>
myPath.h1{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<div class="myPath" >
<!-- 创建画布 -->
<canvas id="myCanvas" width="220" height="130" style="border:1px solid #c3c3c3;"
onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()" onclick="cnvs_drawFlag()">
您的浏览器不支持 HTML5 canvas 标签。
</canvas><br/>
<h1 id="xycoordinates"> 这是我的轨迹</h1>
</div>
<div class="myFlag">
<img id="flag" width="220" height="130" src="https://bkimg.cdn.bcebos.com/pic/48540923dd54564e339f275ebfde9c82d0584fdb?x-bce-process=image/crop,x_0,y_4,w_1280,h_845">
</div>
<script type="text/JavaScript">
//获得元素
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
//填充渐变
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 190, 80);
//写字
ctx.fillStyle = "black";
ctx.font="bold italic 18px 微软雅黑";
ctx.fillText("Good luck, China!",20,50);
</script>
<script type="text/JavaScript">
function cnvs_getCoordinates(e) {
x = e.clientX;
y = e.clientY;
document.getElementById("xycoordinates").innerHTML = "Coordinates: (" + x + "," + y + ")";
}
function cnvs_clearCoordinates() {
document.getElementById("xycoordinates").innerHTML = "这是我的轨迹";
}
function cnvs_drawFlag(){
//获得元素
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//画出国旗
var img = document.getElementById("flag");
ctx.drawImage(img,0,0,220,130);
}
</script>
</body>
</html>
视频：
效果
