Canvas基本知识

context:context是一个封装了很多绘图功能的对象，获取这个对象的方法是 var context =canvas.getContext("2d");

也许这个2d勾起了大家的无限遐想，但是很遗憾的告诉你html5不提供3d服务。

canvas元素绘制图像的时候有两种方法，分别是

context.fill()//填充

context.stroke()//绘制边框

style:在进行图形绘制前，要设置好绘图的样式

context.fillStyle//填充的样式

context.strokeStyle//边框样式

context.lineWidth//图形边框宽度

颜色的表示方式:

直接用颜色名称:"red" "green" "blue"

十六进制颜色值: "#EEEEFF"

rgb(1-255,1-255,1-255)

rgba(1-255,1-255,1-255,透明度)

和GDI是如此的相像，所以用过GDI的朋友应该很快就能上手

新建文件

<!DOCTYPE html>
<html>
<head> 
 <meta charset="utf-8"> 
 <title>php中文网</title> 
</head>
<body>
<canvas id="demoCanvas" width="500" height="500">
 <p>请使用支持HTML5的浏览器查看本实例</p>
</canvas>
<!---下面将演示一种绘制矩形的demo--->
<script type="text/javascript">
 //第一步：获取canvas元素
 var canvasDom = document.getElementById("demoCanvas");
 //第二步：获取上下文
 var context = canvasDom.getContext('2d');
 //第三步：指定绘制线样式、颜色
 context.strokeStyle = "red";
 //第四步：绘制矩形，只有线。内容是空的
 context.strokeRect(10, 10, 190, 100);
 //以下演示填充矩形。
 context.fillStyle = "blue";
 context.fillRect(110,110,100,100);
</script>
</body>
</html>

提交重置代码

自动运行