您的位置：首页 > Web前端 > HTML5

html5-canvas

2016-04-12 20:21 309 查看

canvas要想实现相应结果必须要有javascript的辅助

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canavs</title>
<style>
*{margin:0; padding:0;list-style:none;}
.canvasId{ border:2px solid #003;}
div{ margin-left:10px; float: left;}
p{z-index:2;}
</style>
<script type="text/javascript">
window.onload=function (){
//画矩形
var c=document.getElementById("canvasId1");
var ctx1 = c.getContext("2d");
ctx1.fillStyle="#003";
ctx1.fillRect(20,10,200,100);
//画空心圆
var a = document.getElementById("canvasId2");
var ctx2 = a.getContext("2d");
ctx2.beginPath();
ctx2.arc(20,20,20,Math.PI,2*Math.PI);
ctx2.stroke();
//画实心圆
var b = document.getElementById("canvasId2");
var ctx3 = b.getContext("2d");
ctx3.beginPath();
ctx3.arc(100,50,40,0,2*Math.PI);
ctx3.fill();
//划线从(10,0)到(100,100)然后再到(200,100)
var d = document.getElementById("canvasId3");
var ctx4 = d.getContext("2d");
ctx4.moveTo(10,0);
ctx4.lineTo(100,100);
ctx4.lineTo(190,0);
ctx4.moveTo(10,100);
ctx4.lineTo(100,0);
ctx4.lineTo(190,100);
ctx4.stroke();
//画文字
var e = document.getElementById("canvasId4");
var ctx5 = e.getContext("2d");
ctx5.font="30px Arial";
ctx5.fillText("hello world",10,50);
//参数（字体内容，x，y，字体内容最大宽度（可选））
ctx5.strokeText("hello world",10,80,80);
//画颜色渐变
var f = document.getElementById("canvasId5");
var ctx6 = f.getContext("2d");
//参数（x起始位置，y起始位置，x结束位置，y结束位置）
var grd = ctx6.createLinearGradient(0,0,100,100);
//0代表从左到右那个左，1代表那个右
grd.addColorStop(0,"red");
grd.addColorStop(1,"#FFF");

ctx6.fillStyle=grd;
ctx6.fillRect(10,10,80,80);
//在画布上画放置图像
var g = document.getElementById("canvasId6");
//var img = document.getElementById("myimg");
var ctx7 = g.getContext("2d");
var img = new Image();
img.src = "t.jpg";
ctx7.drawImage(img,0,10);
}
</script>
</head>

<body>
<div>
<canvas id="canvasId1" class="canvasId" width="300" height="200" ></canvas>
</div>
<div>
<canvas id="canvasId2" class="canvasId" width="200" height="100" ></canvas>
</div>
<div>
<canvas id="canvasId3" class="canvasId" width="200" height="100" ></canvas>
</div>
<div>
<canvas id="canvasId4" class="canvasId" width="200" height="100" ></canvas>
</div>
<div>
<canvas id="canvasId5" class="canvasId" width="200" height="100" ></canvas>
</div>
<div>
<canvas id="canvasId6" class="canvasId" width="200" height="100" ></canvas>
<img src="t.jpg" alt="" id="myimg" style="display:none"/>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航