html5 canvas路径绘制2

<!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的更多相关文章

HTML5 canvas标签绘制正三角形鼠标按下点为中间点，鼠标抬起点为其中一个顶点
用html5的canvas标签绘制圆.矩形比较容易,绘制三角形,坐标确定相当于前面两种难点,这里绘制的是正三角形,比较容易,我们只需要把鼠标刚按下去的点设置为三角形的中心点,鼠标抬起的点设置为三角形右 ...
[js高手之路] html5 canvas教程 - 绘制七巧板
七巧板长什么样? 用canvas把他画出来,其实就是把这7个区域的图形,每个点的坐标找出来,再用moveTo, lineTo连线,设置不同的颜色即可. <head> <meta ch ...
canvas路径绘制
惯例,先贴代码: 1 /** 2 * Created by Administrator on 2016/1/27. 3 */ 4 function draw (id){ 5 var canvas = ...
HTML5 Canvas中绘制椭圆的几种方法
1.canvas自带的绘制椭圆的方法 ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)是后来 ...
[HTML5 Canvas学习]绘制矩形
1.使用strokeRect和fillRect方法绘制矩形 a.strokeRect是绘制一个不填充的矩形 b.fillRect是绘制一个填充的矩形代码: <script> var ca ...
HTML5 canvas图像绘制方法与像素操作属性和方法
图像绘制方法 drawImage() 向画布上绘制图像.画布或视频像素操作属性和方法 width 返回 ImageData ...
html5 canvas 鼠标绘制
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
HTML5 Canvas ( 图片绘制转化为base64 ) drawImage,toDataURL
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

随机推荐

一款基于Zigbee技术的智慧鱼塘系统研究与设计
在现代鱼塘养鱼中,主要困扰渔农的就是养殖成本问题.而鱼塘养殖成本最高的就是养殖的人工费,喂养的饲料费和鱼塘中高达几千瓦增氧机的消耗的电费.实现鱼塘自动化养殖将会很好地解决上述问题,大大提高渔农的经济效 ...
UI Recorder 功能详解
前言: UI Recorder安装教程见:UI Recorder 安装教程(一).UI Recorder 安装教程(二) 本次着重介绍UI Recorder录制过程中的功能按钮:添加悬停,添加断言,使 ...
《Linux 内核分析》第五周
[李行之原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000] <Linux内 ...
第一个Sprint计划
时间:5月22-28日 (6天) 人员:杜殷浩(界面设计) 何广强(界面美化) 目标:将基本框架设计好,实现好.
Github作为图床的一个小坑
Github作为图床的一个小坑前言听了少铭同学建议把github作为图床,结果遇到了一个小坑,总是显示不出来图片. 问题描述与解决形如下的链接是显示不出来的: https://github.co ...
组件 --BreadCrumb--面包屑
面包屑组件多用于导航栏,对于大型网站,做面包屑导航栏 .breadcrumb .breadcrumb-item .active:表示现在正处在该页面效果截图: 代码: <nav> < ...
Beta 冲刺一
团队成员 051601135 岳冠宇 031602629 刘意晗 031602248 郑智文 031602330 苏芳锃 031602234 王淇照片项目进展岳冠宇昨天的困难无今天的进度 ...
Linux命令（十三）建立目录 mkdir 删除目录 rmdir
一.建立目录 mkdir 命令简介 mkdir 命令用于创建指定的目录.创建目录时当前用户对需要操作的目录有读取权限.如果目录已经存在,会提示报错并推出. mkdir 可以创建多级目录. 常用参数说明 ...
ORM的详解
有很多小伙伴都不太理解ORM是什么,其实不用想象的那么复杂.我们先根据3W1H去理解. who:首先ORM可以立即为(Object/Relation Mapping): 对象/关系映射 what:其次 ...
解决SVN安装语言包后无法选择中文的问题（亲测可行）
TortoiseSVN_1.8.8安装后无法选择简体中文,或者安装语言包后也无法选择中文 1.找到 SVN 安装目录,把里面的Languages文件夹删掉 2.安装语言包,百度一下也有很多安装包和语言 ...

html5 canvas路径绘制2

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

随机推荐

热门专题