H5 canvas 测试

最新推荐文章于 2025-06-20 07:29:27 发布

chenjiu3302

最新推荐文章于 2025-06-20 07:29:27 发布

阅读量431

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/519617/blog/903678

本测试包括在画布上画矩形，线，圆，以及颜色的渐变，实心，空心字，引入图片等。

效果：

代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>canvasTest</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
window.onload=function(){
	can01();
	can02();
}

function can01(){
	var c=$("#can01")[0];
	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(0,0,200,100);
	//线条
	ctx.moveTo(0,0);
	ctx.lineTo(400,200);
	ctx.stroke();
	//圆
	ctx.beginPath();
	ctx.arc(95,50,40,0,2*Math.PI);
	ctx.stroke();
	//文本
	ctx.font="30px Arial";
	ctx.fillText("Hello World",10,150);
	ctx.strokeText("Hello World",10,100);
}
function can02(){
	var c=$("#can02")[0];
	var ctx=c.getContext("2d");
	// 创建渐变
	var img = new Image();
    img.src = "image.jpg";
	img.onload = function() {
		ctx.drawImage(img,10,10);
	} 
}
</script>
<style>
.can{
width:400px;
height:200px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="can01" class="can"></canvas>
<canvas id="can02" class="can"></canvas>
</body>
</html>

转载于:https://my.oschina.net/519617/blog/903678