html5--5-3 给直线添加样式
html5--5-3 给直线添加样式
学习要点
- strokeStyle属性：设置颜色、渐变或模式（本节课只涉及到颜色）
- lineWidth属性：--设置线宽
Canvas的路径方法
- moveTo() 定义绘制路径的起点(在直线中就是定义直线的起点)
- lineTo() 添加一个新点，(在我们的直线案例中就是定义直线的终点，但是后边继续绘制的话，它就变成中间点)
- stroke() 绘制已定义的路径
绘制直线段流程:
- 在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");
//设置线宽
context.lineWidth=10;
//设置颜色
context.strokeStyle="#FF0000";
//用moveto设置起点
context.moveTo(10,10);
//用lineTo设置终点
context.lineTo(100,100);
context.lineTo(100,200);
context.lineTo(200,200);
context.lineTo(300,100);
context.lineTo(10,10);
//开始画线
context.stroke();
</script>
</body>
</html>
html5--5-3 给直线添加样式的更多相关文章
- html5 canvas 笔记二（添加样式和颜色）
色彩 Colors fillStyle = color 设置图形的填充颜色. strokeStyle = color 设置图形轮廓的颜色. 透明度 Transparency globalAlpha = ...
- [转]用CSS给SVG <use>的内容添加样式
来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=ref ...
- 深入理解HTML5：语义、标准与样式（勇猛精进早登大师殿堂创最优品质交互）
深入理解HTML5:语义.标准与样式(勇猛精进早登大师殿堂创最优品质交互) [美]布拉德福(Bradford,A.) [美]海涅(Haine,P.)著 高京译 ISBN 978-7-121-20552 ...
- 深入理解HTML5：语义、标准与样式
<深入理解HTML5:语义.标准与样式> 基本信息 作者: (美)布拉德福(Bradford,A.) 海涅(Haine,P.) 译者: 高京 出版社:电子工业出版社 ISBN:978712 ...
- HTML5的新特性：范围样式，又叫做<style scoped>
Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做<style scoped> .开发者可以通过为根元素设定一个添加了scoped属性的style标签,来限制样式只作用于 ...
- 为html.EditorFor添加样式
有网友问及,怎样为html.EditorFor添加样式. 解决方法,可以参考下面语法: 先new一个htmlAttributes. @model Book @using Insus.NET.Model ...
- JQuery为元素添加样式
由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好 为定义好的css样式可以调用元素的css方法添加样式 $("span").cs ...
- JavaScript 应用开发 #5：为完成的任务添加样式
判断一下任务的状态,如果是完成的任务,可以在任务项目的上面,添加一个额外的 css 类,在这个 css 类里,可以去定义完成的任务的样式.比如,把文字的颜色变成浅友色,并且在文字上面添加一条删除线.这 ...
- HTML添加样式三种办法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- DEDECMS5.5怎样调用{dede:field.content/}做简介之类的单独页面？
很多时候,如果用dede来做一些企业公司网站,或者一些部门网站的时候.需要某些栏目是一个单页的文章,用于公司简介或者企业文化之类的.那么就要用到栏目功能的栏目内容,也就是dede的content标签. ...
- js json 对象
JSON 语法规则 JSON 语法是 JavaScript 对象表示法语法的子集. 数据在名称/值对中 数据由逗号分隔 大括号保存对象 中括号保存数组 JSON 名称/值对 JSON 数据的书写格式是 ...
- Ubuntu下安装libsvm
在安装LibSVM前需要先装 python 和 gnuplot linux 一般都自带了python2.7,所以python的安装不再赘述 在 ubuntu 下安装 gnuplot 不能直接 sudo ...
- JS中Float类型加减乘除 修复 JQ 操作 radio、checkbox 、select LINQ to SQL:Where、Select/Distinct LINQ to SQL Count/Sum/Min/Max/Avg Join
JS中Float类型加减乘除 修复 MXS&Vincene ─╄OvЁ &0000027─╄OvЁ MXS&Vincene MXS&Vincene ─╄Ov ...
- http 错误代码一览表
http协议一些常见的状态码为: 1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态代码. 代码 说明 100 (继续) 请求者应当继续提出请求. 服务器返回此代码表示已收到请求的第一部分 ...
- quick-cocos2d-x教程12:实现文本和password输入界面
用户输入账号和password输入是常见工能,如今用editbox来实现username和password输入.可是这个商业项目上常见功能,网上却没有找到教程.我就一步一步的实现.代码例如以下: fu ...
- qemu-kvm编译错误
今天编译了下qemu-kvm,死活编不过,错误信息如下: CC block/qcow2-snapshot.oIn file included from ./qemu-common.h:6:0, ...
- Fedora 25/24/23 nVidia Drivers Install Guide
https://www.if-not-true-then-false.com/2015/fedora-nvidia-guide/ search Most Popular Featured Linux ...
- IntelliJ IDEA配置Tomcat及部署项目
IntelliJ IDEA配置Tomcat及部署项目(原链接) 主要有以下几个要点 1.选择本地的tomcat容器. 2.可以选择修改访问路径. 3.On Update action 当我们按 Ctr ...
- RestTemplate请求
JSONObject json = new JSONObject(sendParam);HttpHeaders headers = new HttpHeaders();MediaType type = ...