html5 canvas简单的直线路径
<!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简单的直线路径的更多相关文章
- 使用html5 Canvas绘制线条(直线、折线等)
使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...
- [js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解
路径在canvas绘图中,经常被用到,是一个非常重要的概念. 比如:我们要在canvas画出3条直线,要求用不同的颜色加以区分. <style> body { background: #0 ...
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
- [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)
本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...
- [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标
有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...
- [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)
绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...
- [js高手之路] html5 canvas教程 - 绘制七巧板
七巧板长什么样? 用canvas把他画出来,其实就是把这7个区域的图形,每个点的坐标找出来,再用moveTo, lineTo连线,设置不同的颜色即可. <head> <meta ch ...
- 学习笔记：HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- html5 canvas 实现一个简单的叮当猫头部
原文:html5 canvas 实现一个简单的叮当猫头部 html5的canvas是很强大的,今天也是温习了一下之前的基础知识,然后学着做了一个简单的小案例.虽然在这一块几乎空白,但还是乐于尝试... ...
随机推荐
- linux centos 中Tomcat的安装和自启动配置
Tomcat的安装和自启动配置将tomcat添加为linux系统服务,网上找到了很多方法,其中比较简单的如下:方法一:(亲测有效)1. 首先需要将$Tomcat_HOME/bin目录下的catalin ...
- Assetbundle管理与加载
最近在做项目优化的时候发现公司的项目用的还是老式的WWW去加载assetbundle资源的形式,而且是通过在两个Update里面分开加载AB和Asset的,这样虽然避免了协程的的使用,但是把一件事分开 ...
- CryptoZombies学习笔记——Lesson2
第二课是僵尸猎食,将把app变得更像一个游戏,添加多人模式,建立更多创造僵尸的方法. chapter1 依然是简介 chapter2:映射和地址 映射相当于一个索引,指向不同地址,不同地址存储的数据不 ...
- PAT甲题题解-1015. Reversible Primes (20)-素数
先判断n是否为素数然后把n转化成d进制下再反转,转化为十进制的num判断num是否为素数 注意n为0和1时,不是素数!!!注意反转后的num也有可能为1,不是素数!!! #include <io ...
- （第十二周）Debug阶段成员贡献分
项目名:食物链教学工具 组名:奋斗吧兄弟 组长:黄兴 组员:李俞寰.杜桥.栾骄阳.王东涵 个人贡献分=基础分+表现分 基础分=5*5*0.5/5=2.5 成员得分如下: 成员 基础分 表现分 个人贡献 ...
- 《Linux内核设计与实现》 第三周 读书笔记
第一章 Linux内核简介 1. Unix的历史 Unⅸ虽然已经使用了40年,但计算机科学家仍然认为它是现存操作系统中最强大和最优秀的系统. Unix强大的根本原因: 简洁 在Unix中所有的东西都被 ...
- wordpress学习五: 通过wordpress_xmlrpc的python包远程操作wordpress
wordpress提供了丰富的xmlrpc接口api来供我们远程操控wp的内容.伟大的开源社区有人就将这些api做了一下封装,提供了一个功能比较完整的python库,库的使用文档地址http://py ...
- iOS之Block总结以及内存管理
block定义 struct Block_descriptor { unsigned long int reserved; unsigned long int size; void (*copy)(v ...
- 自定义SQL语句
在用@query写了sql语句后,返回的结果集不能自动转换为自定义的对象. 百度有一篇博客,解决方案是直接在sql语句里实例化对象,我用了,但是语法错误,又谷歌了下,sql语句里是不能这样写的,这是h ...
- 《当大数据遇见网络：大数据与SDN》
总体结构: <当大数据遇见网络:大数据与SDN> 摘要 大数据和SDN无论是对于学术界还是工业界来说都极具吸引力.传统上人们都是分别在最前沿工作中研究这两个重要的领域.然而一方面,SDN的 ...