canvas使用

canvas属于HTML5中的一个新标签,canvas中文翻译过来就是画布的意思 , 我们可以在canvas上面画各种各样的图形, 也可以将图片放在canvas上面,以及做一些渐变效果 ,等等.

一个最简单的canvas画矩形

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas画矩形</title>
</head>
<body>
<!--定义一个canvas标签-->
<canvas id="myCanvas" width="500px" height="200px"></canvas>
</body>
<script type="text/javascript">
// 找到canvas元素
var objCanvas = document.getElementById("myCanvas");
// 通过找到的canvas元素创建一个2dcanvas对象
var objGc2d = objCanvas.getContext("2d");
// 填充颜色
objGc2d.fillStyle = "#FF0000";
// 0,0 代表x与y轴的坐标(与background-position中x,y用法一致) , 150代表宽度, 75为长度
objGc2d.fillRect(0, 0, 150, 75);
</script>
</html>

将图像写入canvas中

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<canvas id="myCanvas" width="200px" height="100px" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
</body>
<script>
var objCanvas = document.getElementById('myCanvas');
// 通过找到的canvas元素创建一个2dcanvas对象
var objGc2d = objCanvas.getContext("2d");
// 实例化Image, 得到一个img对象
var objImg = new Image();
// 给这个img对象设置图像
objImg.src='../Html/bg.png';
// 将图像写入画布中 , 0,0 分别代表x与y轴的坐标
objGc2d.drawImage(objImg,0,0);
</script>
</html>

使用canvas实现文字渐变效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>shadow</title>
</head>
<body>
<canvas id="canvasis"></canvas>
<script>

var objCanvas = document.getElementById("canvasis");
var objGc2d = objCanvas.getContext("2d");
objGc2d.font = "30px Microsoft YaHei";
// Create gradient(创建渐变)渐变开始点的 x 坐标,渐变开始点的 y 坐标 , 渐变结束后的x坐标与渐变结束后的y坐标
var gradient = objGc2d.createLinearGradient(0, 0, objCanvas.width, 0);
// 在不同的位置添加不同的颜色
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// 填充渐变
objGc2d.strokeStyle = gradient;
// 10 与 50 分别代表相当于画布x与y轴的坐标
objGc2d.strokeText("OSganping.github.io", 10, 50);

</script>
</body>
</html>
实现效果如下

image

分享到