<!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='#ff00ff'

	context.lineWidth=10;

        context.lineGap='square';

        context.beginPath();

        context.moveTo(20,0);

        context.lineTo(100,0);

        context.stroke();

        context.closePath();

}

}

</script>

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

你的浏览器无法使用canvas

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

</canvas>

</body>

</html>

写到这篇的时候莫名有种大学里面上计算图形学第一张如何画一个直线（DDA算法）

设直线通过点

和

，则直线方程可表示为：

。

如果已知第

点的坐标，可用步长

和

得到第

点的坐标为：

 

或

 

将算得的直线上每个点的当前坐标，按四舍五入得到光栅点的位置。

好了以下是正文

我简单的写了个10像素宽的线条

从（20,0）到（100,0）。

添加了2个以前没用到的属性

lineCap定义上下文中线的端点：butt端点是垂直于线段边缘的平直边缘

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

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

lineJoin定义了两条线相交产生的拐角

miter 在连接外边缘盐城详解

bevel。连接处是一个对角线斜角

round。连接处是一个圆

lineWidth定义线的宽度（简称线宽）

strokeStyle定义先和形状边框的颜色和样式

html5 canvas简单的直线路径的更多相关文章

  1. 使用html5 Canvas绘制线条(直线、折线等)

    使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...

  2. [js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解

    路径在canvas绘图中,经常被用到,是一个非常重要的概念. 比如:我们要在canvas画出3条直线,要求用不同的颜色加以区分. <style> body { background: #0 ...

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

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

  4. [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)

    本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...

  5. [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标

    有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...

  6. [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)

    绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...

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

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

  8. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  9. html5 canvas 实现一个简单的叮当猫头部

    原文:html5 canvas 实现一个简单的叮当猫头部 html5的canvas是很强大的,今天也是温习了一下之前的基础知识,然后学着做了一个简单的小案例.虽然在这一块几乎空白,但还是乐于尝试... ...

随机推荐

  1. JavaWeb项目学习教程(1) 准备阶段

    写在最前面 为什么要写一个这样的教程?作为一个软件工程专业的学生,上课老师讲得飞快,几乎都是在课后自己消化,我知道学习记录的重要性.我自己本身还有很多很多基础的东西都没有学会,比较博客园的人有很大的差 ...

  2. Java实验报告（实验一）

    课程:Java程序设计          班级: 1351 姓名:王玮怡                学号:20135116 成绩:             指导教师:娄嘉鹏       实验日期: ...

  3. 第二阶段冲刺——five

    个人任务: 王金萱:合并程序(统计团队博客). 季方:合并并排除运行团队博客时出现的错误. 马佳慧:优化登录.注册信息的填写判断. 司宇航:完成打印名单的功能. 站立会议: 任务看板和燃尽图:

  4. GITHUB使用及入门总结

    这是我第一次应用git,以下仅供git的初学者参考.     github是一个基于git的代码托管平台,付费用户可以建私人仓库,我们一般的免费用户只能使用公共仓库,也就是代码要公开.这对于一般人来说 ...

  5. 小学四则运算APP 第一个冲刺阶段 第一天

    团队成员:陈淑筠.杨家安.陈曦 团队选题:小学四则运算APP 第一次冲刺阶段时间:11.17~11.27 思考:初步了解小学四则运算数是在100以内的加减乘除,首先先从简单的地方入手,把最基础的算法功 ...

  6. 云平台项目--学习经验--jsrender前端渲染模板

    jsrender的好处:可以预先自定义一些固定的html标签,在需要显示数据的时候,可以直接传入真实的数据并显示在web页面中,避免了Js编写中的复杂过程:针对高性能和纯字符串渲染并优化,不需要依赖D ...

  7. Apache DBUtils框架 结果处理器

    package com.itheima.dbutil; import java.util.List; import java.util.Map; import org.apache.commons.d ...

  8. ElasticSearch 2 (24) - 语言处理系列之停用词：性能与精度

    ElasticSearch 2 (24) - 语言处理系列之停用词:性能与精度 摘要 在信息检索早期,磁盘和内存相较我们今天的使用只是很小的一部分.将索引空间保持在一个较小的水平是至关重要的,节省每个 ...

  9. Alpha冲刺第9天

    Alpha第9天 1.团队成员 郑西坤 031602542 (队长) 陈俊杰 031602504 陈顺兴 031602505 张胜男 031602540 廖钰萍 031602323 雷光游 03160 ...

  10. Oracle 标准版 企业版 个人版的区别 转帖

    转帖来源: https://blog.csdn.net/flg_inwind/article/details/2628133 同事方总:http://www.oracle.com/us/corpora ...