<!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. Windows Server 2003出现Directory Listing Denied This Virtual Directory does not allow contents to be listed.的解决方案

    Directory Listing DeniedThis Virtual Directory does not allow contents to be listed. 是目录权限无法访问的问题 解决 ...

  2. [ERROR] Failed to execute goal net.alchim31.maven:scala-maven-plugin:3.2.2:compile (scala-compile-first) on project spark-tags_2.11: Execution scala-compile-first of goal net.alchim31.maven:scala-mave

    build/mvn -Pkubernetes -Phadoop-2.7 -Dhadoop.version=2.7.3 -Phive -Phive-thriftserver -DskipTests cl ...

  3. Catlike学习笔记(1.1)-使用Unity实现一个钟表

    最近发现『Catlike系列教程』觉得内容真的很赞,感觉有很多地方涉及到了我的知识盲点,如果真的可以照着做下来一遍的话应该收获颇丰.因为教程很长所以逐字翻译不太可能了(主要是翻译的太差).基本上就是把 ...

  4. 177. Convert Sorted Array to Binary Search Tree With Minimal Height【LintCode by java】

    Description Given a sorted (increasing order) array, Convert it to create a binary tree with minimal ...

  5. dokuwiki工具栏添加换行回车快捷键与按钮

    需求 dokuwiki的语法要求以 \\ 为换行符(\\后面必须有1个空格).编辑器有快捷键.快捷键说明如下.https://www.dokuwiki.org/start?id=zh-tw:acces ...

  6. openstack horizon 开发第二天

    依照上次的简单的仪表盘添加动作额外添加或修改的文件mydashboard/├── mypanel│   ├── forms.py│   ├── tables.py│   ├── templates│  ...

  7. 《Linux内核分析》第三周学习报告

    <Linux内核分析>第三周学习报告                                    ——构造一个简单的Linux系统MenuOS 姓名:王玮怡  学号:201351 ...

  8. SQL Sever——远程过程调用失败（0x800706be）

    最近重装了系统,VS和SQL Sever莫名奇妙的不能用了.下面总结一下这个过程中遇到的问题,跟大家分享一下经验~~ 大概是以前的安装过程都十分顺利,这次,在尝试了数次登陆不上去之后,我仍然怀疑是自己 ...

  9. spring整合redis（jedis）

    真是一步一个坑阿,学点新技术,这么难,这个异常: java.lang.IllegalStateException: Could not load TestContextBootstrapper [nu ...

  10. vue 将值存储到vuex 报错问题

    报错 :Vuex - Computed property “name” was assigned to but it has no setter 如何解决: computed: { addModal: ...