<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>

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

<title>基本文件配置</title>

<script src="js/modernizr.js"></script>

</head>

<body>

<p>lineCap定义上下文中线的端点：</p>

<p>butt端点是垂直于线段边缘的平直边缘</p>

<p>round端点是在线段边缘处以线宽为直径的半圆</p>

<p>square：端点是在选段边缘处以线宽为长，以一般线宽为宽的矩形</p>

<p>lineJoin定义了两条线相交产生的拐角</p>

<p>miter 在连接外边缘盐城详解</p>

<p>bevel。连接处是一个对角线斜角</p>

<p>round。连接处是一个圆</p>

<script type="text/javascript">

window.addEventListener('load',eventWindowLoaded,false);

function eventWindowLoaded(){

	canvasApp();

}

function canvasSupport(){

	return Modernizr.canvas;

}

function canvasApp(){

	if(!canvasSupport()){

		return;

	}else{

		var theCanvas = document.getElementById('canvas')

		var context = theCanvas.getContext("2d")

	}

	drawScreen();

    function drawScreen(){

		//圆形端点，斜角连接

		 context.strokeStyle="pink";

		 context.lineWidth=10;

		 context.lineJoin='bevel';

		 context.lineCap='round';

		 context.beginPath();

		 context.moveTo(0,0);

		 context.lineTo(25,0);

		 context.lineTo(25,25);

		 context.stroke();

		 context.closePath();

		 //round圆形端点，斜角链接

		 context.beginPath();

		 context.moveTo(10,50);

		 context.lineTo(35,50);

		 context.lineTo(35,75);

		 context.stroke();

		 context.closePath();

		 //butt平直的端点，round圆形的链接

		 context.lineJoin='round';

		 context.lineCap='butt';

		 context.beginPath();

		 context.beginPath();

		 context.moveTo(10,100);

		 context.lineTo(35,100);

		 context.lineTo(35,125);

		 context.stroke();

		 context.closePath();

   }

}

</script>

<canvas id="canvas" width="500" height="500">

你的浏览器无法使用canvas

如有疑问加QQ：1035417613;小白童鞋；你的支持是我最大的快乐！！

</canvas>

</body>

</html>

效果如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>

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

<title>基本文件配置</title>

<script src="js/modernizr.js"></script>

</head>

<body>

<script type="text/javascript">

window.addEventListener('load',eventWindowLoaded,false);

function eventWindowLoaded(){

	canvasApp();

}

function canvasSupport(){

	return Modernizr.canvas;

}

function canvasApp(){

	if(!canvasSupport()){

		return;

	}else{

		var theCanvas = document.getElementById('canvas')

		var context = theCanvas.getContext("2d")

	}

	drawScreen();

    function drawScreen(){

		//圆形端点，斜角连接

		 context.strokeStyle="pink";

		 context.lineWidth=10;

		 context.lineJoin='bevel';

		 context.lineCap='round';

		 context.beginPath();

		 context.moveTo(50,20);

		 context.lineTo(35,100);

		 context.lineTo(55,150);

		 context.stroke();

		 context.closePath();

	     context.beginPath();

		 context.moveTo(25,65);

		 context.lineTo(80,65);

		 context.stroke();

		 context.closePath();

		 context.beginPath();

		 context.moveTo(75,40);

		 context.lineTo(60,100);

		 context.lineTo(30,150);

		 context.stroke();

		 context.closePath();

		 context.beginPath();

		 context.moveTo(120,20);

		 context.lineTo(120,150);

		 context.stroke();

		 context.closePath();

		 context.beginPath();

		 context.moveTo(100,55);

		 context.lineTo(120,70);

		 context.stroke();

		 context.closePath();

		 context.beginPath();

		 context.moveTo(100,105);

		 context.lineTo(120,80);

		 context.stroke();

		 context.closePath();

		 context.beginPath();

		 context.moveTo(140,20);

		 context.lineTo(140,150);

		 context.lineTo(180,150);

		 context.lineTo(180,120);

		 context.stroke();

		 context.closePath();

		 context.beginPath();

		 context.moveTo(140,70);

		 context.lineTo(160,55);

		 context.stroke();

		 context.closePath();

		 context.beginPath();

		 context.moveTo(140,85);

		 context.lineTo(160,105);

		 context.stroke();

		 context.closePath();

   }

}

</script>

<canvas id="canvas" width="500" height="500">

你的浏览器无法使用canvas

如有疑问加QQ：1035417613;小白童鞋；你的支持是我最大的快乐！！

</canvas>

</body>

</html>

效果吐槽一下这字画的竟然和我写的一样丑T_T无语了

html5 canvas路径绘制2的更多相关文章

  1. HTML5 canvas标签绘制正三角形 鼠标按下点为中间点，鼠标抬起点为其中一个顶点

    用html5的canvas标签绘制圆.矩形比较容易,绘制三角形,坐标确定相当于前面两种难点,这里绘制的是正三角形,比较容易,我们只需要把鼠标刚按下去的点设置为三角形的中心点,鼠标抬起的点设置为三角形右 ...

  2. [js高手之路] html5 canvas教程 - 绘制七巧板

    七巧板长什么样? 用canvas把他画出来,其实就是把这7个区域的图形,每个点的坐标找出来,再用moveTo, lineTo连线,设置不同的颜色即可. <head> <meta ch ...

  3. canvas路径绘制

    惯例,先贴代码: 1 /** 2 * Created by Administrator on 2016/1/27. 3 */ 4 function draw (id){ 5 var canvas = ...

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

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

  5. [HTML5 Canvas学习]绘制矩形

    1.使用strokeRect和fillRect方法绘制矩形 a.strokeRect是绘制一个不填充的矩形 b.fillRect是绘制一个填充的矩形 代码: <script> var ca ...

  6. HTML5 canvas图像绘制方法与像素操作属性和方法

    图像绘制方法 drawImage()        向画布上绘制图像.画布或视频 像素操作属性和方法 width                                返回 ImageData ...

  7. html5 canvas 鼠标绘制

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. HTML5 Canvas ( 图片绘制 转化为base64 ) drawImage,toDataURL

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

随机推荐

  1. 《陪孩子像搭积木一样学编程》，一起来玩Scratch（1）使用Scratch编程的基本流程

    编程是一件很有趣的事情.初次接触编程,你可能不知所措,别担心,这并不复杂.首先,为了让读者对编程有大概的了解,可以把编写Scratch程序的过程分成7个步骤(如图1.8).注意,这是理想状态.在实际的 ...

  2. 学习 google file system 心得体会

    Google File system文件系统,是在特别便宜的普通硬件设备上运行,它是一个面向大规模数据密集型运用的.可伸缩的分布式文件系统. 与传统文件相比,它认为组件失效是很平常的事件,因为GFS包 ...

  3. Notes of Daily Scrum Meeting（12.21）

    今天的燃尽图把周六的进度加了进来,由于我的失误没有及时更新TFS,所以出现了一些错误,向大家道歉. 下面是今天的任务总结: 团队成员 今日团队工作 陈少杰 继续进行网络连接的调试 王迪 测试搜索的功能 ...

  4. 【Beta阶段】第五次Scrum Meeting！

    每日任务内容: 本次会议为第五次Scrum Meeting会议~ 由于本次会议项目经理召开时间依旧较晚,在公寓7层召开,女生参与了线上会议. 队员 昨日完成任务 明日要完成任务 刘乾 #167(未完成 ...

  5. YISMILE微信小程序使用说明

    使用说明: 程序名称:易校(YISMILE) 开发团队:KNY三人组 团队logo: 程序logo: 程序功能及使用说明: “失物招领”界面可以浏览发布的失物信息: “发布信息”界面用户可以针对物品类 ...

  6. Daily Scrum 10.22

    (写于10.22周四0晨) 昨天任务还未完成的继续完成任务. 每个人都查看自己的TFS,修改已经完成的任务状态,改为已关闭-已完成. 由于android studio运行过于慢,我们统一采取eclip ...

  7. Visual Studio2013安装过程

    Visual Studio是微软开发的一套基于组件的软件开发工具,我选择安装的是Visual Studio2013版本.首先, 第一步是要找到一个安装包: 我们可以直接百度MSDN,显示的第一条就是官 ...

  8. hao360恶意篡改IE首页——修复方法

    设置浏览器首页空白或自定义后,点击开始菜单,找到IE浏览器,右键进入属性,找到shortcut里面“目标”,你会看到里面链接到的是hao360什么乱糟糟的,这才是以上问题的关键原因.删除图1中红色内容 ...

  9. vue （实战）登录1

    https://segmentfault.com/a/1190000009329619 https://www.jianshu.com/p/c51ffebeceed

  10. 删除或添加最大化、最小化按钮 - 回复 "Tommy the CAT" 的问题

    本例效果图: 代码文件: unit Unit1; interface uses   Windows, Messages, SysUtils, Variants, Classes, Graphics, ...