HTML5在canvas中绘制复杂形状附效果截图

一、绘制复杂形状或路径 
在简单的矩形不能满足需求的情况下，绘图环境提供了如下方法来绘制复杂的形状或路径。 
beginPath() ： 开始绘制一个新路径。 
closePath() ： 通过绘制一条当前点到路径起点的线段来闭合形状。 
fill() ， stroke() ： 填充形状或绘制空心形状。 
moveTo() ： 将当前点移动到点(x,y)。 
lineTo() ： 从当前点绘制一条直线到点(x,y)。 
arc(x,y,r,sAngle,eAngle,counterclockwise) ： 绘制一条指定半径的弧到点(x,y)。

二、用这些方法绘制复杂形状需遵循以下步骤 

使用beginPath()方法开始绘制路径。 
使用moveTo()、lineTo()、arc()、方法创建线段。 
使用closePath()结束绘制并闭合形状（可选）。 
使用stroke()或fill()绘制路径的外边框或填充形状。使用fill()会自动闭合所有未闭合路径。

三、弧arc()绘制说明 
 
 
四、在canvas中绘制复杂形状 
代码如下:

<!DOCTYPE
html>

<html
xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta
http-equiv="Content-type"
content="text/html; charset = utf-8">

<title>HTML5</title>

<script
type="text/javascript"
charset="utf-8">

//这个函数将在页面完全加载后调用

function pageLoaded() {

//获取canvas对象的引用,注意tCanvas名字必须和下面body里面的id相同

var canvas = document.getElementById('tCanvas');

//获取该canvas的2D绘图环境

var context = canvas.getContext('2d');

//绘制代码将出现在这里

//绘制复杂性猪

//填充三角形

context.beginPath();

context.moveTo(10, 120);//从(10,20开始)

context.lineTo(10, 180);//表示从(10,120)开始，画到(10,180)结束

context.lineTo(110, 150);//表示从(10,180)开始，画到(110,150)结束

context.fill();//闭合形状并且以填充方式绘制出来

//三角形的外边框

context.beginPath();

context.moveTo(140, 160);//从点(140,160)开始

context.lineTo(140, 220);

context.lineTo(40, 190);

context.closePath(); //关闭路径

context.stroke(); //以空心填充

//一个复杂的多边形

context.beginPath();

context.moveTo(160, 160);//从点(160,160)开始

context.lineTo(170, 220);

context.lineTo(240, 210);

context.lineTo(260, 170);

context.lineTo(190, 140);

context.closePath();

context.stroke();

//绘制弧

//绘制半圆弧

context.beginPath();

，角度从0到180°的弧线

context.arc(100, 300, 40, 0 * Math.PI, 1 * Math.PI, true); //PI的弧度是180°

context.stroke();

//画一个实心圆

context.beginPath();

，角度为0到360°的弧

context.arc(100, 300, 30, 0 * Math.PI, 2 * Math.PI, true);//2*Math.PI是360°

context.fill();

//画一个3/4弧

context.beginPath();

，角度为0到270°的弧

context.arc(200, 300, 25, 0 * Math.PI, 3 / 2 * Math.PI, false);

context.stroke();

}

</script>

</head>

<body
onload="pageLoaded();">

<canvas
width="400"
height="400"
id="tCanvas"
style="border:black
1px
solid;">

<!--如果浏览器不支持则显示如下字体-->

提示：你的浏览器不支持

标签

</canvas>

</body>

</html>

五、绘制效果 

HTML5在canvas中绘制复杂形状附效果截图的更多相关文章

  1. HTML5 在canvas中绘制复杂形状

    作者:卿笃军 原文地址:http://blog.csdn.net/qingdujun/article/details/32942667 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,画图环 ...

  2. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  3. 浅谈canvas中的拖尾效果

    引言 很早就想了解以下 canvas 中的拖尾效果(如彗星,烟花等效果)是怎么实现的,但是一直没有深入了解,正巧在 codepen 上看到一个 demo,代码简单,效果炫酷,故有此文. 什么黑科技 在 ...

  4. 在 Canvas 中绘制扇形

    在 HTML5 Canvas 中,我们可以通过 arc 方法来绘制圆形: // context.arc(x, y, r, sAngle, eAngle, counterclockwise); var ...

  5. HTML5使用Canvas来绘制图形

    一.Canvas标签: 1.HTML5<canvas>元素用于图形的绘制,通过脚本(通常是javascript)来完成. 2.<canvas>标签只是图形容器,必须使用脚本来绘 ...

  6. HTML5 Canvas中绘制椭圆的几种方法

    1.canvas自带的绘制椭圆的方法 ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)是后来 ...

  7. Canvas中绘制贝塞尔曲线

    ① 什么是贝塞尔曲线? 在数学的数值分析领域中,贝济埃曲线(英语:Bézier curve,亦作“贝塞尔”)是计算机图形学中相当重要的参数曲线.更高维度的广泛化贝济埃曲线就称作贝济埃曲面,其中贝济埃三 ...

  8. html5 js canvas中画星星的函数

    function drawStar(cxt, x, y, outerR, innerR, rot) { cxt.beginPath(); ; i < ; i++) { cxt.lineTo(Ma ...

  9. <canvas>中isPointInPath()方法在不同绘制内容中的效果

    <canvas>是HTML5中新增加的一个元素,我们可以使用脚本(通常使用JavaScript)在上面绘制图形,就像个画布一样.我们可以用它来绘制图表.制作一些动画.默认大小为300px ...

随机推荐

  1. Java 6 JVM参数选项大全（中文版）

    原文来自: http://kenwublog.com/docs/java6-jvm-options-chinese-edition.htm 本文是基于最新的SUN官方文档Java SE 6 Hotsp ...

  2. Java基础知识笔记（一：修饰词、向量、哈希表）

    一.Java语言的特点(养成经常查看Java在线帮助文档的习惯) (1)简单性:Java语言是在C和C++计算机语言的基础上进行简化和改进的一种新型计算机语言.它去掉了C和C++最难正确应用的指针和最 ...

  3. 【读书笔记《Bootstrap 实战》】2.作品展示站点

    假设我们已经想好了要给自己的作品弄一个在线站点.一如既往,时间紧迫.我们需要快一点,但作品展示效果又必须专业.当然,站点还得是响应式的,能够在各种设备上正常浏览,因为这是我们向目标客户推销时的卖点.这 ...

  4. Bootstrap 按钮

    本章将通过实例讲解如何使用 Bootstrap 按钮.任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观.但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示: ...

  5. NYOJ 478

    月老的烦恼(1) 描述 月老最近遇到了一个很棘手的问题,就是“剩男”“剩女”急速增长,而自己这边又人手不足导致天天都得加班.现在需要你来帮助月老解决这个问题,牵红绳的规则很简单:每个男生都一个编号n( ...

  6. 分布式光伏系列：分布式光伏电站 运行与维护方案一览（zz）

    原文:http://www.toutiao.com/a6353487210709516546/ 中小型光伏电站的特点是占地面积小.安装位置灵活且日常维护量少.由于光伏电站不同的运行环境,为了能够使光伏 ...

  7. 关于Linux与Windows的区别的文章

    你从来只用过Windows,从来没接触过UNIX,只知道把一个文件拽来拽去,只知道硬盘就是C: D: E:却从来没有研究过分区表,也许 会用VC编个程序,很习惯它的集成环境.... 有一天,不管什么原 ...

  8. 疑难杂症——EF+Automapper引发的查询效率问题解析

    前言:前面总结了一些WebApi里面常见问题的解决方案,本来打算来分享下oData+WebApi的使用方式的,奈何被工作所困,只能将此往后推了.今天先来看看EF和AutoMapper联合使用的一个问题 ...

  9. 第一个Android应用--签证无忧 上线

    用了大概1个多星期的时间,把一个简单的应用完成,[签证无忧]是基于在我所在公司办理签证的前提下,为方便客户查询进度所开发,后来我加了淘宝的购买链接,这样客人在以后需要时不需要到淘宝查找了. 签证无忧这 ...

  10. html与htm区别

    1.index.html与index.htm同时有,先访问.html 2.htm是为了兼容以前的DOS系统.