请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5教程 Canvas 查看内容

HTML5 canvas绘制路径

2013-10-2 10:47| 发布者: admin| 查看: 1428| 评论: 0

摘要: 方法:beginPath()创建一个路径.在内存里,路径是以一组子路径(直线,弧线等)的形式储存的,它们共同构成一个图形。每次调用beginPath,子路径组都会被 重置,然后可以绘制新的图形。closePath()它会尝试用 ...

方法:

beginPath() 创建一个路径.在内存里,路径是以一组子路径(直线,弧线等)的形式储存的,它们共同构成一个图形。每次调用 beginPath,子路径组都会被 重置,然后可以绘制新的图形。

closePath() 它会尝试用直线连接当前端点与起始端点来关闭路径,但如果图形已经关闭或者只有一个点,它会什么都不做。这一步不是必须的。

stroke() 绘制图形的边框

fill()  填充出一个实心图形,当调用 fill 时,开放的路径会自动闭合,而无须调用 closePath 

 

示例1

说明

画一个简单的图形--三角形

 

代码

<html>

<head>

<script type="text/javascript">

 function draw() {

      var canvas = document.getElementById("cv"); 

      if (canvas.getContext) { 

        var ctx = canvas.getContext("2d");

        ctx.beginPath();

    ctx.moveTo(75,50);

    ctx.lineTo(100,75);

    ctx.lineTo(100,25);

        ctx.fill();

       }  

    }   

 script>

<title>测试绘制路径2title>

  head>

  <body onload="draw();" > 

      <canvas id="cv" width="150" height="150">

      </canvas>

  body>

html>

效果:

示例2

说明

用线条画一个笑脸

 

代码

<html>

 <head>

 <script type="text/javascript">

 function draw() {

      var canvas = document.getElementById("cv"); 

      if (canvas.getContext) { 

       var ctx = canvas.getContext("2d");

           ctx.beginPath(); 

           ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle 

           ctx.moveTo(110,75); 

           ctx.arc(75,75,35,0,Math.PI,false);   // Mouth (clockwise) 

           ctx.moveTo(65,65); 

           ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye 

           ctx.moveTo(95,65); 

           ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye 

           ctx.stroke();  

           //thegoneheart 完整例子  

           ctx.beginPath(); 

           ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle 

           ctx.moveTo(110,75); 

           ctx.arc(75,75,35,0,Math.PI,false);   // Mouth (clockwise) 

           ctx.moveTo(65,65); 

           ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye 

           ctx.moveTo(95,65); 

           ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye ctx.stroke();           

           ctx.beginPath(); 

           ctx.moveTo(40,75); 

           ctx.lineTo(60,65); 

           ctx.lineTo(90,65); 

           ctx.moveTo(110,75); 

           ctx.lineTo(125,75); 

           ctx.stroke();

       }  

    }   

    script>

    <title>测试绘制路径2title>

  head>

  <body onload="draw();" > 

      <canvas id="cv" width="150" height="150">

      </canvas>

  body>

html>

效果

绘制路线的3个方法:

moveTo(x,y)  将起始坐标移动到(x,y)

lineTo(x,y) 接受终点的坐标(xy)作为参数。起始坐标取决于前一路径,前一路径的终点即当前路径的起点,起始坐标也可以通过 moveTo 方法来设置

Acr(x, y, radius, startAngle, endAngle, anticlockwise) 绘制弧线或圆。方法接受五个参数:x是圆心坐标,radius 是半径,startAngle 和 endAngle 分别是起末弧度(以 轴为基准),anticlockwise 为 true 表示逆时针,反之顺时针。注意:arc 方法里用到的角度是以弧度为单位而不是度。度和弧度直接的转换可以用这个表达式:var radians = (Math.PI/180)*degrees;


鲜花

握手

雷人

路过

鸡蛋

相关阅读

快讯

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2019-12-11 12:28 , Processed in 0.096976 second(s), 31 queries .

返回顶部