1.canvas画布(位图)
2.绘制矢量图
1.不要在style中给canvas设置宽高 会有位移差
2.
//获取元素
var c=document.getElementById("c")
//获取绘图环境
var c=c.getContext("2d")
fillRect() 绘制一个填充的方块 默认颜色是黑色
strokeRect() 绘制带边框的方块
绘制线条
moveTo() 绘制线段起点
lineTo() 绘制线段的领点
每个线条只能有一个 moveTo可以有多个 lineTo
stroke() 绘制线段
beginPath() closePath() 二者同时出现 将绘制路径闭合（起始点 结尾点首位相连）
Rect() 绘制方块
clearRect（0,0,width,height）清楚画布
save() restore() 二者成对出现 中间属性样式只影响内部，不影响外部
1.画圆
c.closePath() c.fill() c.restore() c.moveTo(200,200) c.arc(200,200,150,0,360*Math.PI/180,true) c.stroke()
200,200是圆形坐标 50是半径
0是起始弧度 Math.PI是结束弧度
true是逆时针 flase是顺时针
注意：角度有正负之分 顺时针角度是正的，逆时针角度是负的
2.画布的平移和旋转
平移translate 画布大小位置不变 起始坐标变了
相当于坐标平移
rotate() 画布的旋转都是以00起始点为中心点旋转
scale(0.5,0.5) 画布的缩放 就是将画布向后移动 跟人的视距就变远了 近大远小
c.fillStyle='lightpink' c.scale(0.5,0.5) c.fillRect(0,0,100,100)
画布中插入图片
//获取元素
var c=document.getElementById("c")
//获取绘图环境
var c=c.getContext("2d")
var img=new Image;
img.src="img/02.jpg"
img.onload=function(){
c.drawImage(img,10,20,160,200)
}
插入字体
//字体大小 样式
c.font="30px imapct"
c.fillText("全站最强",200,200)
//字体空心
c.strokeText("Big smile!",200,200)
svg
svg绘制矢量图
svg使用xml格式绘制图形
svg要有一个根节点 叫svg标签 相当于html
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="400px"> </svg>
svg如果不设置大小，默认占用面积 3008*150
1.定义矩形
rect标签有：
width height 矩形宽高
fill 定义矩形填充颜色(rgb值、颜色名或16进制)
stroke-width 定义矩形边框宽度
stroke 定义矩形边框以及颜色
x 定义矩形左侧位置(矩形到浏览器窗口左侧距离)
y 定义矩形顶端位置(矩形到浏览器窗口顶端位置)
fill-opacity 定义填充颜色透明度
stroke-opacity 定义边框颜色透明度
Rx Ry 可以使矩形产生圆角
<!--矩形--> <rect width="100px" height="100px" x="50" y="250" rx="20" ry="20" style="fill:pink;stroke-width: 5;stroke: red;"></rect>
fill-opactty和opacity的区别?
fill-opacity只改变填充颜色透明度 opacity改变fill和stroke的透明度都改变
2.定义圆
circle cx cy 定义圆点的 x和y坐标。如果省略cx和cy，圆的中心会设置为(0,0)
r定义半径
<!--圆形--> <circle cx="200" cy="200" r="50" style="stroke:"pink"; fill:'red';"> </circle>
3.定义椭圆
椭圆和圆很相似。不同之处在于椭圆有不同的x和y半径，而圆的x和y半径是相同的
ellipse cx cy定义圆中心的x，y坐标
rx 定义水平半径
ry 定义垂直半径
<!--椭圆--> <ellipse cx="300" cy="340" rx="100" ry="50" style="fill: yellowgreen;"></ellipse>
4.定义直线
line x1 y1 定义起始坐标 x2 y2定义结束坐标 必须结合 stroke
<!----直线----> <line x1="150" y1="250" x2="100" y2="100" style="stroke: lawngreen;"></line>
5.定义多边形
polygon poinits=“定义多边形每个角x和y坐标”
<!--定义多边形--> <polygon points="240,10 330,190 290,210" style="fill: pink; stroke: red;"> </polygon>
6.定义曲线(折线)
polyline poinits