canvas元素用于在网页上绘制图形javascript
HTML5的canvas元素使用JavaScript在网页上绘制图像。html
画布是一个矩形区域,你能够控制其每一像素。java
canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。canvas
<!-- 向HTML5页面添加canvas元素,规定元素的id、宽度和高度 --> <canvas id="myCanvas" width="200" height="100"></canvas> <script type="text/javascript"> //用id来寻找canvas元素 var c = document.getElementById("myCanvas"); //建立context对象,这个对象拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法 var cxt = c.geContext("2d"); //将其染成红色 cxt.fillStyle = "#FF0000"; //规定了形状、位置和尺寸 cxt.fillRect(0, 0, 150, 75); </script>
参数值code
参数 | 描述 |
---|---|
x | 圆的中心的 x 坐标。 |
y | 圆的中心的 y 坐标。 |
r | 圆的半径。 |
sAngle | 起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。 |
eAngle | 结束角,以弧度计。 |
counterclockwise | 可选。规定应该逆时针仍是顺时针绘图。False = 顺时针,true = 逆时针。 |
<!-- 向HTML5页面添加canvas元素,规定元素的id、宽度和高度 --> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas> <script type="text/javascript"> //用id来寻找canvas元素 var c = document.getElementById("myCanvas"); //建立context对象,这个对象拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法 var cxt = c.geContext("2d"); //定位坐标(10, 10) cxt.moveTo(10, 10); //添加新点(150,50) cxt.lineTo(150,50); //添加新点(10,50) cxt.lineTo(10,50); //画出moveTo和lineTo()的路径 cxt.stroke(); </script>
<!-- 向HTML5页面添加canvas元素,规定元素的id、宽度和高度 --> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas> <script type="text/javascript"> //用id来寻找canvas元素 var c = document.getElementById("myCanvas"); //建立context对象,这个对象拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法 var cxt = c.geContext("2d"); cxt.fillStyle = "#FF0000"; cxc.beginPath(); cxt.arc(70, 18, 15, 0, Math.PI*2, true); cxt.closePath(); cxt.fill(); </script>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var grd=cxt.createLinearGradient(0,0,175,50); grd.addColorStop(0,"#FF0000"); grd.addColorStop(1,"#00FF00"); cxt.fillStyle=grd; cxt.fillRect(0,0,175,50); </script>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <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>