html5--5-2 绘制直线
html5--5-2 绘制直线
学习要点
- 如何在HTML5文档中添加canvas元素
- canvas的属性
- 了解canvas坐标系
- 了解script元素
- 绘制一条直线（准确的说是线段）
什么是canvas
- HTML5的canvas元素是HTML5技术标准中最令人振奋的功能之一。它提供了一套强大的图形API，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。让开发者能够制作从文字处理到电子游戏的各类应用程序。由与canvas的操作需要用到JavaScript知识，而我们现在还没有讲到JavaScript，所以本章中我们只是学习canvas的基础操作。但是再后续课程中我们讲完JavaScript之后仍然会对canvas进行进一步的深入学习
绘制直线段流程:
- 在HTML5文档中添加canvas元素，并且设置的宽高和ID
- 在canvas元素中添加提示语句，让不支持canvas的浏览器能够显示友好的提示语句
- 添加script元素
- 获取画布/设置绘图绘图环境：此为固定语句，暂时记住、了解即可，后续课程还会继续讲解
- 指定线宽:lineWidth= 数值
- 指定颜色：strokeStyle=颜色值（只适用用轮廓，线段等，填充色用：fillStyle=颜色值
- 设定起点：moveTo(x坐标,y坐标)
- 设定终点：lineTo(x坐标,y坐标)
- 开始绘制：stroke()
实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head> <body>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
canvas{background: #A9A9A0}
</style>
</head>
<body>
<canvas id="mycanvas" width="500px" height="300">
您的浏览器暂不支持HTML5的canvas元素！！
</canvas>
<script type="text/javascript">
//定义变量获取画布DOM
var canvas=document.getElementById("mycanvas");
//设置绘画环境为2d
var context=canvas.getContext("2d");
//用moveto设置起点
context.moveTo(10,10);
//用lineTo设置终点
context.lineTo(100,100);
//开始画线
context.stroke();
</script>
</body>
</html>
html5--5-2 绘制直线的更多相关文章
- canvas绘制直线
HTML5 <canvas>元素用于图形的绘制,该元素只是图形容器,必须使用javascript脚本绘制图形创建一个画布:<canvas id="myCanvas" ...
- 【HTML5】Canvas绘制基础
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- 封装 用canvas绘制直线的函数--面向对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Cocos2d-x 重写draw方法绘制直线等图形时被遮挡覆盖问题的一种解决方案
最近在学习过程cocos2dx的过程中需要使用到绘制直线的功能,所以我就采用了引擎中 ccDrawLine 方法,然后重写 draw 方法,在该方法中绘制直线. 但是出现了一个问题,那就是绘制的图形被 ...
- HTML5 WebAudioAPI(四)--绘制频谱图2
绘制分析器数组所有数据.本文内容,承接上文 1.800宽度绘制 var url='../content/audio/海阔天空.mp3'; if (!window.AudioContext) { ale ...
- c# 动态绘制直线和曲线
c# 动态绘制直线和曲线 在本案例中利用Graphics对象动态地绘制直线和曲线.程序运行后,选择“直线”单选按钮,然后按下鼠标左键拖动鼠标就可以绘制直线,选择“曲线”单选按钮,然后移动鼠标就可以 ...
- DDA_为微分绘制直线算法
DDA_为微分绘制直线算法 以步进坐标轴部长=1像素为单位,计算y=kx + b,绘制像素点(x, round(y)). 即步进坐标增长1, 另一坐标增长K或者1/k. 程序如下: //数值微分算法D ...
- Breaseman算法绘制直线算法公式推导|步骤|程序
Breaseman算法绘制直线算法公式推导|步骤|程序 BreaseMan算法优点: (1)不必计算直线的斜率,因此不用做除法: (2)不用浮点数,只用整数: (3)制作整数的加减乘除,和乘2操作,乘 ...
- 第一课、OpenGL绘制直线等等
第一课.OpenGL绘制直线等等 分类: [开发技术]OpenGL 2012-01-18 14:59 5217人阅读 评论(0) 收藏 举报 buffer图形c // // main.c // o ...
随机推荐
- 无插件，跨平台，基于WebGL的三维地球来了！！！
用户通过浏览器即可递交数据到同一个地理信息系统中,操作简单,跨平台 ,无插件,可扩展,高效共享 ,完美匹配超大数据量发布! 近年来,随着计算机图形学.虚拟现实.卫星遥感.航空摄影.激光雷达等技术的迅猛 ...
- 全文索引-lucene，solr，nutch，hadoop之nutch与hadoop
全文索引-lucene.solr.nutch,hadoop之lucene 全文索引-lucene.solr,nutch,hadoop之solr 我在去年的时候,就想把lucene,solr.nutch ...
- Error building Player: Win32Exception: ApplicationName='E:/adt-20140702/sdk\tools\zipalign.exe', Com
1.原因 更新sdk后报错..由于版本号不同,zipalign.exe所处路径不同 2.解决的方法 在sdk路径下搜索zipalign.exe .然后拷贝到报错内容中制定的路径即可了.
- 一个IP绑定多个域名
http://www.zhihu.com/question/29390934/answer/44252886
- VS2010/12多核编译
在工作中,我们的一个完整的项目肯定是由多个个解决方案组成的,我们在调试的时候就会不断的去编译修改过的解决方案,如果当修改的解决方案多了以后我们编译的速度就在很大的程度上决定了我们的工作效率.这时候我们 ...
- mysql flush详解
http://www.cnblogs.com/ggjucheng/archive/2012/11/07/2758021.html cnblogs - FLUSH TABLES WITH READ ...
- 前端UI框架整理
JQuery Jquery官网:http://jquery.com/ jQuery是一个快速,小巧,且功能丰富的JavaScript库. Jquery-1.11.3.min.js 压缩版:http:/ ...
- hdu5318 The Goddess Of The Moon (矩阵高速幂优化dp)
题目:pid=5318">http://acm.hdu.edu.cn/showproblem.php?pid=5318 题意:给定n个数字串和整数m,规定若数字串s1的后缀和数字串s2 ...
- YAML 对中文的处理
from yaml import load,dump f = open('xx.ymal',encoding='utf-8') l = load(f) print(f) w = open('xx_co ...
- 你必须了解的java内存管理机制（二）-内存分配
前言 在上一篇文章中,我们花了较大的篇幅去介绍了JVM的运行时数据区,并且重点介绍了栈区的结构及作用,相关内容请猛戳!在本文中,我们将主要介绍对象的创建过程及在堆中的分配方式. 相关链接(注:文章讲解 ...