-
原生JS
var domObj = document.getElementById('idname');
-
JQuery
var domObj = $('#id');
-
JQuery ————> JS
var domObj = $('#id'); // 实际上JQuery 获取的对象是一个dom对象集合(数组) // 所以 取出其中的目标就可以进行原生js的对象操作了 domObj[0].addEventListener('click', function(){alert('!!')}); // 这样也可以 domObj.get(0);
-
JS ————> JQuery
var domObj = document.getElementById('idname'); // 直接在dom对象上 套上$就可以转换 $(domObj).text('!!!!');
-
首先JQuery可以使用所有的CSS选择器
var $obj = $('#app li .main') // id为app的元素下的所有li标签下的所有class为main的标签
-
JQuery也有自己的过滤选择器
var li = $('#app li:eq(1)'); // 选择id为app的元素下的第二个元素 注意序号是从0开始的 // 其他过滤选择器如 :odd 选择奇数 :even 选择偶数 :gt(index) 大于index的 :lt(index) 小于index的
-
筛选选择器
$('A').childern('B') // 相当于css中 A>B $('A').find('B') // 相当于css中 A B $('#app').siblings() // 返回id为app的元素的 所有前后兄弟 $('#app').siblings('li') // 返回id为app的元素的 所有前后li标签兄弟 $('A').next() // A的上一个兄弟 next()同样可以指定兄弟是哪一种标签 $('A').prev() // A的下一个兄弟 prev()同样可以指定兄弟是哪一种标签
==注意==
注意不同对象不同的方法
var $Obj = $('#id'); var domObj = document.getElementById('idname'); $obj.text('!!!'); // √ 这是一个jquery对象 $obj[0].text('!!!'); // × 这是一个dom对象，不能用jquery的方法 $obj[0].innerHTML('!!!!'); // √ $obj.get(0).text('!!!'); // × 这是一个dom对象，不能用jquery的方法 domObj.text('!!!'); // × 这是一个dom对象，不能用jquery的方法 domObj.innerHTML('!!!'); // √
-
主要使用CSS()方法
<style> .css1 { padding: 0; margin: 0; } .css2 { color: blue; } </style> <div class="css1" style="color: red;"></div>
操作style(内联)样式
$('div').css('color') // css方法第一个参数是属性 读取style的第一个值 >>>rgb(255, 0, 0) $('div').css('color'， 'pink') // css方法第二个参数是属性值 >>>设置div的style为pink $('div').css({ 'color': 'pink', 'font-size': '30px' }) // 还可以直接按照对象的方式传递 font-size可以写成fontsize
操作Class(外联)样式
$('div').addClass('css2'); // 添加样式 $('div').removeClass('css2'); // 删除样式 $('div').hasClass('css2'); // 判断是否有这个样式 $('div').toggleClass('css2'); // 切换样式 // oggleClass()可以配合其他函数，比如，点击一下调用这句话 // 产生的结果就是添加--->删除---->添加...如此往复切换css
==注意==
css()方法设置和读取都只是读取的style的值，并不是操作了css 。要操作css必须使用操作class的一些方法。
操作内联样式是会被后来的样式所覆盖的
$('div').attr(属性名) // 获取属性值
$('div').attr({。。。}) // 多个属性设置属性值 和css一样
$('div').attr(属性名， 值) // 设置属性值会覆盖
// 用prop()代替这个方法更好$('div').append(元素) // 向div的末尾添加元素 这里的元素可以是字符串，也可以是dom元素，也可以是jquery元素
$('div').prepend(元素) // 向div的头部添加元素
$('<p></p>').appendTo('div') // 向div尾部增加一个p标签
$('div').after(元素) // 向div后面增加一个元素
$('div').before(元素) // 向div前面增加一个元素
$('div').empty() // 清空div中的所有元素 通常使用.innerHTML = ''; 容易产生内存泄露
$('div').remove() // 剔除某个元素
$('div').clone() // 包括文字也会被复制，其中还有个参数，如果是true则事件也仪器复制==顺便提一句==
jquery中创建元素的方式直接**$('
')，直接写上标签就行了，还是得注意，这是创建的jquery对象**，不是dom对象！！！！
-
简单添加方法
$('ul').click(()=>{alert('!!!')}) // 注册一个点击事件 $('ul').bind('click mouseover mouseleave', (e)=>{console.log(e)}) // 注册多个事件 // 他们都有二个参数是data 也就是触发的时候 会给返回jquery对象增加一个一个data属性，值就是设置的那个值
-
on()、delegate()方法
$('div').delegate(目标标签，事件类型， 事件函数) /***********************************************/ $('div').delegate('p'，'click'， function () { alert('!!!!'); }); // 相当于 document.querySelector('.css1').addEventListener('click', function (e) { if(e.target.nodeName === 'P') { // 注意这里的判断 jquery代替的这一步 alert('!!!!'); } }); // 也就是指定的某个元素触发事件才有效 $(selector).toggle(function1(),function2(),functionN(),...) // 点击这个元素，轮流切换响应事件函数 // 1.9以后这个方法只能显示或者隐藏
==使用on()可以完全代替其他注册方法==
$('.css1').on('click', ()=>{alert('!!!')}) // 普通注册事件 $('.css1').on('click','i', ()=>{alert('!!!')}) // 代理模式，注意和delegate的前两个参数是反的 $('.css1').on('click mouseover mouseleave','i', ()=>{alert('!!!')}) // 多个事件解绑
-
解绑事件
由on()方法注册的事件可以由off()方法移除 其他的就$().click = null
-
阻止冒泡和默认行为
event.stopPropagation() event.preventDefault() // 通用的和原生js
$('div').val() // 获取value值
$('div').val('XXX') // 设置value值
$('div').text() // innerText
$('div').html() // innerHTML
$('html, body').animate({scrollTop:0}) // 回到顶部-
基本动画
$(selector).hide(speed,callback); // 隐藏 $(selector).show(speed,callback); // 显示 $(selector).toggle(speed,callback,switch) // 切换隐藏显示 $(selector).slideDown/Up(speed,callback); // 上下卷动 $(selector).slideToggle(speed,callback); // 卷动切换 $(selector).fadeIn/Out/Toggle(speed,callback); // 淡入淡出、出入切换
-
自定义动画
$(selector).animate({params},speed,callback) // 动画方法 // 使用 marginRight 而不是 margin-right // 多个动画罗列在一起，形成了动画队列 .stop().animate() // 停止当前动画 实际上多在开始一个新动画之前加，为了停止前一个动画 .clearQueue(queuename) // 清除队列，保持清除前的一帧 .jumpToEnd() // 调到动画的最后一帧
$('div').prevAll(selector) // 获取div前面的所有兄弟元素
$('div').prevUtil(selector) // 获取div前面的所有兄弟元素，直到某个元素
// parent也有类似方法
$('div').find('p').end() // 返回上一次的选择，相当于div-->div中的p-->div
$('div').each(function(elemnt, index){...}) // 为所有的选择的div- 自制插件
jQuery.prototype.xxx = function() {..} // 给原型增加自己的函数var xhr = new XMLHttpRequest; // 示例XMLHttpRequest对象
xhr.open('POST', '/xxx'); // 连接路径 设置请求方式
// 设置请求头 设置发送的数据格式 POST请求时要注意这个格式的设置
xhr.setRequestHeader('content-Type', 'application/Json')
xhr.send(); // 发送
xhr.onreadystatechange = function() { // 注册状态改变事件
if(this.readyState === 4) { // 请求完全完成时
var text = xhr.responseText // 响应体
}
}
// 注意所有操作都是异步的
var xhr = new XMLHttpRequest; // 示例XMLHttpRequest对象
xhr.open('GET', '/xxx'); // 连接路径 设置请求方式
xhr.send("key1=value1&key2=value2&..."); // 发送请求，这里是按照json格式发送
xhr.onreadystatechange = function() { // 注册状态改变事件
if(this.readyState === 4) { // 请求完全完成时
var text = xhr.responseText // 响应体
}
}
JSON.parse() // 将json字符串转化为json格式 json字符串必须是单引号'{"key":value}'
JSON.stringify() // 将json转化为json字符串| 响应状态码 readyState | 意义 |
|---|---|
| 0 | 初始化对象 new |
| 1 | 已经建立连接 open |
| 2 | 接收到了响应头 .getResponseHeader() .getAllResponseHeadders() |
| 3 | 正在下载响应体 |
| 4 | 一切都已经完成 |
-
$.ajax
$.ajax({ url:'/ss/ss' ，// 请求地址 type:'POST'， // 请求方式 sucess:function(){...} ， // 请求成功后的回调函数 complete:function(){...}, // 请求完成，无论成功还是失败 data:'&foo=bar1&foo=bar2' ， // 请求数据 dataType:'json'/'jsonp'/'xml'... ， // 响应的数据类型 contentType:'application/x-www-form-urlencoded' ， // 发送编码类型 beforeSend: function () { // 发送之前的操作，也可以修改请求头 // 禁用按钮防止重复提交 $("#submit").attr({ disabled: "disabled" }); }， jsonp:function(){} // 指定jsonp的回调函数 })
-
$.get()和$ .post()
$.get(url,data,success(response,status,xhr),dataType) // get
$(selector).get(url,data,success(response,status,xhr),dataType) // 指定某个元素中使用get到的数据
$.post(url,data,success(data, textStatus, jqXHR),dataType) // post不能指定某个元素使用数据-
$.load()
$("#result").load("ajax/test.html #container"); // 在id为result的元素中，加载ajax/test.html地址的页面中，的id为container的部分
-
全局事件处理函数
$(document).ajaxStart(function(){}) // 请求发生时执行 $(document).ajaxStart(function(){}) // 请求结束时执行
-
无论是请求还是响应，浏览器和服务端之间的信息交互都是以字符串的形式，所以在传递如JSON数据时
-
使用
JSON.stringify()和JSON.parse()// 浏览器发送前 xhr.send(JSON.stringify(jsonObj)) // 浏览器接收到响应后 JSON.parse(xhr.responseText)
-
表单数据
每个表单控件都应该有
name属性，这因为当表单自己提交数据的时候，是按照“name1=value1&name2=value2...”来发的，如果没有name属性，传输数据就会出错
var http = require('http'); // 引入http组件
var server = http.createServer(); // 实例服务对象
server.listen(3000, function(){ // 监听端口3000，运行成功时执行回调函数
console.log('127.0.0.1:3000');
});
server.on('request', function(req, res) { // 注册请求监听器 回调函数两个参数request和response
if(req.url === '/') { // 首页请求'/'时执行函数 req.url 获取请求路径端口号后面那串
console.log('hello');
res.setHeader('content-Type', 'text/plain:charset=utf-8') // 告诉浏览器编码格式
res.end('!!!'); // 响应内容 get方法请求的响应会直接显示在浏览器上
}
});var http = require('http');
var fs = require('fs');
var server = http.createServer();
server.on('request', function(req, res) {
if(req.url === '/') {
console.log('hello');
fs.readFile('./demo/test.html', function(err, data) { // 增加一个文件读取
if(err) return res.end('错误');
else res.end(data.toString()); // 必须将读取的数据字符串化，不然都是二进制数据
})
}
});
server.listen(3000, function(){
console.log("http://127.0.0.1:3000/");
});- request对象
- req.scoke.remotPort/.remotAddress 获取请求端口和ip
- response对象
- res.statusCode = 302 设置http状态码
- res.setHeader('location', '/') 设置响应头 这里相当于重定向
- res.end()
var url = require('url');
url.parse('https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd=ss&rsv_pq=d609a65a00041ba2&rsv_t=4b6cS16HIl4uXDGDgt2pCbCDrSoGzh3IJ5Cw5P6hyHQMYqgFvRNgDaSoYUQ&rqlang=cn&rsv_enter=1&rsv_sug3=2&rsv_sug1=1&rsv_sug7=100&rsv_sug2=0&inputT=9&rsv_sug4=1598') // 比如使用parse()方法
//输出>>>>
Url {
protocol: 'https:',
slashes: true,
auth: null,
host: 'www.baidu.com',
port: null,
hostname: 'www.baidu.com',
hash: null,
search: '?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd=ss&rsv_pq=d609a65a00041ba2&rsv_t=4b6cS16HIl4uXDGDgt2pCbCDrSoGzh3IJ5Cw5P6hyHQMYqgFvRNgDaSoYUQ&rqlang=cn&rsv_enter=1&rsv_sug3=2&rsv_sug1=1&rsv_sug7=100&rsv_sug2=0&inputT=9&rsv_sug4=1598',
query: 'ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd=ss&rsv_pq=d609a65a00041ba2&rsv_t=4b6cS16HIl4uXDGDgt2pCbCDrSoGzh3IJ5Cw5P6hyHQMYqgFvRNgDaSoYUQ&rqlang=cn&rsv_enter=1&rsv_sug3=2&rsv_sug1=1&rsv_sug7=100&rsv_sug2=0&inputT=9&rsv_sug4=1598',
pathname: '/s',
path: '/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd=ss&rsv_pq=d609a65a00041ba2&rsv_t=4b6cS16HIl4uXDGDgt2pCbCDrSoGzh3IJ5Cw5P6hyHQMYqgFvRNgDaSoYUQ&rqlang=cn&rsv_enter=1&rsv_sug3=2&rsv_sug1=1&rsv_sug7=100&rsv_sug2=0&inputT=9&rsv_sug4=1598',
href: 'https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd=ss&rsv_pq=d609a65a00041ba2&rsv_t=4b6cS16HIl4uXDGDgt2pCbCDrSoGzh3IJ5Cw5P6hyHQMYqgFvRNgDaSoYUQ&rqlang=cn&rsv_enter=1&rsv_sug3=2&rsv_sug1=1&rsv_sug7=100&rsv_sug2=0&inputT=9&rsv_sug4=1598' }
// 这么大堆其实也就 pathname: '/s' 这一句有用
// 因为get请求的时候，特别是表单的get请求，在请求路径后面会跟着一串数据，如这里的/s?....
// 而我们需要根据请求路径来响应，所以我们只需要提取出/s，使用这个方法就可以解析地址
// query属性就是请求发送的数据 // 因为node运行有个路径，安装的那些包运行的时候也有自己规定的路径
// 所以直接写相对路径很容易出现混乱 导致错误
// 终极解决办法就是使用包path和常量__dirname来确定路径
__dirname // 当前项目的路径 通俗来讲就是这个js文件载哪个文件夹
var path = require('path')
path.join(__dirname, '...') // 这样就组成了一个路径var express = require('express'); //引入包
var app = express(); // 创建对象
app.listen(3000, ()=>{console.log('http://127.0.0.1:3000')}); // 监听
app.get('/', (req, res)=>{ // 响应请求
res.send(req.url); // 这里的send方法 自动设置了编码格式
});
// get 和 post 返回的依然是express对象 所以
app
.get('', fn)
.post('', fn)
.get('', fn).....// 一直调用下去...
// 第一个参数是请求路径 也就是地址栏的那个,随便写名字
// 第二个参数是公开目录的dir
app.use('/static/', express.static('./public/'))
// 当省略第一个参数时 默认是响应/public/-
在router.js中定义
var express = require('express'); var router = express.Router(); // 创建router容器 router.get('/', (req, res)=>{ // router.get/post 代替 app.get/app.post fs.readFile(path.join(__dirname, '../index.html'), (err, data)=>{ if(err) return console.log(err) else res.send(data.toString()); }); }) router.post('/data', (req, res)=>{ db.findData(req.body, (err, ret)=>{ if(err) console.log(err); else res.send(ret) }); }) module.exports = router; // 导出router容器
-
在app.js中使用router
var router = require('./router/router'); app.use(router); // 路由
// 要安装两个包 art-template和express-art-template
// 然后
app.engine('art', require('express-art-template')) // 第一个参数表示读取以art为扩展名的文件 可以随便取
// 第二个参数就是引入express-art-template包
// 在响应里面写
res.render('XX.art', value) // 第一个参数是渲染的模板文件 默认是放在views文件夹中 当然也可以改
// 第二个就是放入模板的数据
// 修改views文件夹
app.set('views', path)// 在HTML中
{{each data}}
<i>{{$value.name}}</i>
{{/each}}
// 在js中
var a = {{'name':xxx, 'age':xxx}, {'name':ooo, 'age':ooo}}
res.render('xx.html', { data:a})
<!--输出为-->
<i>xxx</i>
<i>ooo</i>-
get
// 很简单 req.query // 这个属性中的请求体已经被转化为了json格式
-
post
// 借助express的中间件body-parser // 先安装 // 然后 var bodyParser = require('body-parser'); // 配置 app.use(bodyParser.urlencoded({extended:false})); app.use(bodyParser.json()); // 然后再响应的时候就可以这样写 req.body // 请求对象就有了body属性 就可可以看到请求体
==注意==
中间件的目的是在浏览器和服务器之间插入一些属性或者其他的东西，所以中间件一定要放在响应操作之前
res.redirect('/')-
cmd/powershell 输入 mongod 回车
默认是开启这个磁盘里的x:/data/db/，如果没有是无法开启服务的。
修改路径 mongod --dbpath=路径
-
在node中连接数据库
- npm i --save-dev mongoose
- 具体使用下面单独讲
-
创建一个数据库模板
// 可以在单独的一个文件中 定义模板 var mongoose = require('mongoose'); // 引用包 var schema = mongoose.Schema; // 取个名字而已 var sale = new schema({ // new 一个Schema类 product: { // 可以定义一些约束 type:String, // 输入数据类型 required:true // 是否必须 // 还能设置默认值 default:xxxx }, region: { type:String, required:true }, sale: { type:Array, required:true } }); // 第一个参数大写首字母单数(约定)，第二个参数模板类，最后会在数据库生成一个复数集合 var saleModel = mongoose.model('Sale', sale); // 将自定义的schema转化为模板对象 // 就是这里的saleModel,之后都是根据它来操作 module.exports = saleModel; // 导出模板对象 方便其他文件使用
2. 操作数据库
```javascript
var mongoose = require('mongoose');
var saleModel = require('../schema/schema'); // 引入刚才的模板文件
// 连接数据库
mongoose.connect('mongodb://localhost/ife'); // 先连接数据库 /ife为数据库名 如果不存在就会创建一个
/**
* 增加数据
*/
function addData(input) {
var data = new saleModel(input); // new一个模板对象 把新数据传入
data.save((err)=>{if(err) console.log(err)}); // newData.save(callback) 存储数据
}
/**
* 查找数据
*/
function findData(condition, callback) {
// 因为要取异步操作的数据，所以增加一个回调函数
saleModel.findOne(condition, (err, ret)=>{ // Model.findOne(condition, callback)
if(err) callback(err, null); // 参数condition可以是任意
else callback(null, ret)
})
}
/**
* 删除数据
* @param {object} condition
*/
function deleteData(condition) {
saleModel.remove(condition, (err)=>{if(err)console.log(err)}); // 和查找很像
}
/**
* 更新数据
*/
function update(condition, newdata) {
saleModel.updateOne({_id:condition}, {$set:{'sale':newdata}}, (err)=>{if(err)console.log(err)});// 这里首先按照_id查找， 然后更新sale部分,{$set:{...}}是数据库操作符
}
```
数据存储在
localStorage是无期限的，而当页面会话结束——也就是说当页面被关闭时,数据存储在sessionStorage会被清除 。
localStorage.setItem('myCat', 'Tom'); // 存储
var cat = localStorage.getItem("myCat"); // 读取
localStorage.removeItem("myCat"); // 移除
// sessionStorage一样的用法==注意==
- 正确存储对象到localstorage的方法是先把对象转化为字符串
JSON.stringify
function currLocation()
{
alert(window.location) // 什么都写 返回当前的url
}
function newLocation()
{
window.location="/index.html" // 写了就会连接至新地址 相对与当前ip的
}| 属性 | 描述 |
|---|---|
| hash | 设置或返回从井号 (#) 开始的 URL（锚）。 |
| host | 设置或返回主机名和当前 URL 的端口号。 |
| hostname | 设置或返回当前 URL 的主机名。 |
| href | 设置或返回完整的 URL。 |
| pathname | 设置或返回当前 URL 的路径部分。 |
| port | 设置或返回当前 URL 的端口号。 |
| protocol | 设置或返回当前 URL 的协议。 |
| search | 设置或返回从问号 (?) 开始的 URL（查询部分）。 |
- href描述的是当前网页的完整地址
- 其他属性就是url的各个部分
http://www.example.com/index.html#print
// 网页index.html的print位置。浏览器读取这个URL后，会自动将print位置滚动至可视区域// 指定锚点
<a name="print"></a> // 给a标签名字
<div id="print" > // 给id- HTTP请求不包括# ，是用来指导浏览器动作的，对服务器端完全无用
- 在第一个**#后面出现的任何字符**，都会被浏览器解读为位置标识符
- 改变#不触发网页重载
- 改变#会改变浏览器的访问历史 使用"后退"按钮，就可以回到上一个位置 可以使用
ajaxget请求hash - window.location.hash这个属性可读可写。读取时，可以用来判断网页状态是否改变；写入时，则会在不重载网页的前提下，创造一条访问历史记录
- onhashchange事件 当#值发生变化时触发
- 谷歌中使用hash，用
#！代替http://twitter.com/#!/username
-
pushState() replaceState()就是替换history条目
var state = { 'page_id': 1, 'user_id': 5 }; var title = 'Hello World'; var url = 'hello-world.html'; history.pushState(state, title, url); // state: 它存储JSON字符串，可以用在popstate事件中 最多存储64kb // title: 最好用null代替 // url: 新的URL不一定要是绝对地址，如果它是相对的，它一定是相对于当前的URL // 新URL必须和当前URL在同一个源下;否则，pushState() 将丢出异常
-
popstate() 当前活动历史项(history entry)改变**（前进，后退）**会触发popstate事件
- 调用
history.pushState()或history.replaceState(),那么事件参数里就会有e.state，其中包含上面设置的state对象
- 调用
<svg version="1.1" 版本号必须的
baseProfile="full" 这个也是必须的
width="300" height="200" 规定整张svg的大小
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red" /> 矩形 注意标签是单个的
<circle cx="150" cy="100" r="80" fill="green" /> 圆
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text> 文字
</svg>==渲染顺序==
>“后来居上”，越后面的元素越可见
<object data="image.svg" type="image/svg+xml" />
或者
<iframe src="image.svg"></iframe>Content-Type: image/svg+xml
Vary: Accept-Encoding
<rect x="60" y="10" rx="10" ry="10" width="30" height="30" />
<!-- 矩形 x,y左上顶点坐标 rx、ry圆角的x，y方向上的半径--> <circle cx="100" cy="100" r="20"/> <!-- 圆 cx、cy圆心坐标 r半径-->
<ellipse cx="75" cy="75" rx="20" ry="5"/> <!-- 椭圆 cx、cy圆心坐标 rx、ry椭圆x，y半径--> <line x1="10" x2="50" y1="110" y2="150"/> <!-- 直线 x1\y1 x2\y2 分别代表起始和终止坐标--> <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/> <!-- 折线 就是多个点组成的-->
<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
<!-- 多边形 唯一与折线的区别就是 最后一个点会自动连接到第一个点--><path d="M250 150 L150 350 L350 350 Z" /> <!-- path标签 首先由d属性确定-->
<!-- d属性的值是一个“命令+参数”的序列-->每一个命令都有两种表示方式，一种是用大写字母，表示采用绝对定位(相对于画笔第一个位置)。另一种是用小写字母，表示采用相对定位 (相对于画笔的上一个位置)
-
M ：Move to
将画笔移动到Mx y这个点，或者mx y。并不会画出实际的东西
-
L：Line to
从当前位置画到L x y (l x y)。
-
水平线和垂直线
从当前位置水平延伸到Hx hx
从当前位置垂直延伸到Vy vy
-
Z
闭合路径，把最后一点连接到起始
<path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>
-
C：三次贝塞尔曲线
C x1 y1, x2 y2, x y
x1 y1：起始端控制点
x2 y2：结束端控制点
x y：曲线终点
-
S：连接多个三次贝赛尔曲线
S x2 y2, x y (or s dx2 dy2, dx dy)
必须跟在一个S或者C后面，S的
第一个点会成为上一个曲线最后的控制
点的对称点
-
Q ：二次贝塞尔曲线
Q x1 y1, x y (or q dx1 dy1, dx dy)
只有一个控制点
-
T：连接多个二次贝塞尔曲线
T x y (or t dx dy)
-
A
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
x y：弧形的终点
rx/ry：和椭圆一样，x或y轴半径
x-axis-rotation：绕x轴旋转度数，如图中两个椭圆(实际看不到下半圆)，一个没有旋转，另一个旋转了-45°
large-arc-flag：角度大小 0：取小弧度的弧线 1：取大弧度的
sweep-flag：弧度方向 0：取逆时针 1：取顺时针
var axisPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
// 要给命名空间才能正确创建svg节点 <canvas id="myCanvas" width="200" height="100"></canvas>
<!--canvas 标签 只有这几个属性 -->-
在javaScript上使用/*获取元素*/ var myCanvas = document.querySelector('#myCanvas'); /*获取绘图工具*/ var context = myCanvas.getContext('2d'); /*设置绘图的起始位置*/ context.moveTo(100,100); /*绘制路径*/ context.lineTo(200,200); /*描边*/ context.stroke();
.fillRect(x, y, width, height)
// 绘制一个填充的矩形
.strokeRect(x, y, width, height)
// 绘制一个矩形的边框
.clearRect(x, y, width, height)
// 清除指定矩形区域，让清除部分完全透明。
- 创建路径起始点
- 然后使用画图命令去画出路径
- 之后你把路径封闭
- 一旦路径生成，你就能通过描边或填充路径区域来渲染图形
-
beginPath()新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
-
closePath()闭合路径之后图形绘制命令又重新指向到上下文中。
-
stroke()通过线条来绘制图形轮廓。
-
fill()通过填充路径的内容区域生成实心的图形。
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
// 画出一个三角形
moveTo(x, y)
// 将笔触移动到指定的坐标x以及y上-
lineTo(x, y)绘制一条从当前位置到指定x以及y位置的直线。
// 填充三角形 ctx.beginPath(); ctx.moveTo(25,25); ctx.lineTo(105,25); ctx.lineTo(25,105); ctx.fill(); // 描边三角形 ctx.beginPath(); ctx.moveTo(125,125); ctx.lineTo(125,45); ctx.lineTo(45,125); ctx.closePath(); ctx.stroke();
-
arc(x, y, radius, startAngle, endAngle, anticlockwise)以（x,y）为圆心
以radius为半径的圆弧（圆）
从startAngle开始到endAngle结束
按照anticlockwise给定的方向（默认为顺时针）来生成。
==注意==
arc()函数中的角度单位是弧度，不是度数。角度与弧度的js表达式:radians=(Math.PI/180)*degrees
context.arc(50, 50, 20, 0, Math.PI * 2, true);
context.fill(); // 画一个实心圆context.beginPath(); context.fillStyle = axisColor; // 先设置了画笔或者填充颜色再画 不然设置无效 context.strokeStyle = axisColor; context.moveTo(dataX, axisHeight - 10); context.lineTo(dataX, axisHeight+5); context.font='16px microsoft yahei'; context.fillText(`${index+1}月`, dataX - 10, axisHeight+20); context.stroke(); context.fill();