html5 学习之路二（canvas）

最新推荐文章于 2024-12-11 05:17:55 发布

原创最新推荐文章于 2024-12-11 05:17:55 发布 · 662 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何使用HTML5 Canvas API来绘制矩形、直线、圆形等基本图形，并展示了如何将图片绘制到Canvas上。此外，还提供了一个使用SVG来创建矢量图形的方法。

一、矩形：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

二、直线：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>

三、圆形：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>

四、画图片：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);
</script>

注：如果想画矢量图形就用svg 直接嵌入html里就行 svg教程：（http://www.w3school.com.cn/svg/index.asp）