画布

创建画布

<canvas id="myCanvas" width="500px" height="500px">请使用charm</canvas>

1.画布就相当于一个div，你需要直接指定宽高，如果在css中指定，那么画出来的线会有锯齿，还很粗，比例不对

2.canvas不是所有浏览器都支持，在标签里的文字，在不支持的环境下才会显示

3.canvas是一个行内元素，所以如果想让它居中，要转成块元素

canvas{    margin: 20px auto;    width: 30%;    height: 500px;    border: 1px red solid;    display: block;}

画直线

let cDemo1=document.getElementById('myCanvas')//获取画布let c_one=cDemo1.getContext('2d')//指定上下文内容，必须写c_one.beginPath()//开始路径c_one.moveTo(10,10)//着笔点开始点c_one.lineTo(50,10)//最后落点c_one.strokeStyle='yellow'//设置颜色c_one.lineWidth=1//设置宽度，注意这里是数字，不要加pxc_one.stroke()//绘制c_one.closePath()//路径结束

直线连画

let cDemo1=document.getElementById('myCanvas')//获取画布let c_one=cDemo1.getContext('2d')//指定上下文内容，必须写c_one.beginPath()//开始路径c_one.moveTo(10,10)//着笔点开始点
c_one.strokeStyle='yellow'//设置颜色c_one.lineWidth=1//设置宽度，注意这里是数字，不要加px
c_one.lineTo(10,50)    //多次释放落点，最后绘制就可以画出来了c_one.lineTo(50,50)c_one.lineTo(50,100)c_one.stroke()//绘制

填充

线画好之后要填充，

c_one.fillStyle='blue'c_one.fill()    //填充的部位就是首位闭合

画矩形

c_one.fillStyle='blue'//选择矩形样式，c_one.fillRect(10,10,150,150)//前两个是坐标的开始点，后2个是宽高

画圆形

c_one.beginPath()c_one.arc(100,100,20,0,Math.PI*2,false)//前2个参数是圆点坐标，第3个是半径，第4，5个是两个度数点，最后一个是方向，true是逆时针，false是顺时针c_one.stroke()

画圆用的其实就是路径，因此要有beginPath()和stroke

关于度数：x轴向右就是0度，顺时针是正，逆时针是负

清除画布

c_one.clearRect(10,10,20,20)//其实就是画一个清楚的矩形，很简单

画文字

c_one.fillText('小雨真是一个超级大帅哥',0,100,900)//写的内容和位置，实心文字,第3个参数是文字的最大宽度，如果本身超过宽度，会压缩至最大宽度c_one.strokeText('空心文字真的是这么好的吗？',0,300,1000)//空心文字

添加style

c_one.fillStyle='red'//样式c_one.strokeStyle='blue'//空心样式

渐变文字

let jianbian=c_one.createLinearGradient(0,0,cDemo1.width,0)//分别表示渐变开始的，xy和结束的xy坐标jianbian.addColorStop('0','yellow')jianbian.addColorStop('0.5','blue')//此处是0-1的渐变颜色设置jianbian.addColorStop('1','red')c_one.font='100px 微软雅黑'//设置字体c_one.fillStyle=jianbian//样式c_one.strokeStyle=jianbian//空心样式c_one.fillText('小雨真是一个超级大帅哥',0,100,900)//写的内容和位置，实心文字,第3个参数是文字的最大宽度，如果本身超过宽度，会压缩至最大宽度c_one.strokeText('空心文字真的是这么好的吗？',0,300,1000)//空心文字

对齐方式

c_one.textAlign='center'//right,left,center,三个值c_one.textBaseline='top'//top,bottom,middle,alphhabetic,hanging5个值

绘制图片

普通画法

let cDemo1=document.getElementById('myCanvas')//获取画布let c_one=cDemo1.getContext('2d')//指定上下文内容，必须写

let img=new Image()img.src='luwan.jpeg'img.onload=()=>{    console.log(img.width,img.height)    c_one.drawImage(img,0,0)    //加载的时候把它画到画布上，后面就是画布坐标}

可调节图像大小

let cDemo1=document.getElementById('myCanvas')//获取画布let c_one=cDemo1.getContext('2d')//指定上下文内容，必须写

let img=new Image()img.src='luwan.jpeg'img.onload=()=>{    console.log(img.width,img.height)    c_one.drawImage(img,0,0,50,50)    //3,4参数就是图像大小}

可剪切图片画法

我们想要把图片剪切一部分画在画布上面

let cDemo1=document.getElementById('myCanvas')//获取画布let c_one=cDemo1.getContext('2d')//指定上下文内容，必须写

let img=new Image()img.src='luwan.jpeg'img.onload=()=>{    console.log(img.width,img.height)
    c_one.drawImage(img,100,100,200,200,0.3*cDemo1.offsetWidth,0.3*cDemo1.offsetHeight,100,100)}

在img参数后面会多4个参数，前2个是要剪切图片的坐标位置，后2个是剪多大

getImageData

let i_1=c_one.getImageData(0,0,100,100)//分别为位置，和大小

putImageData

c_one.putImageData(i_1,550,550)//分别为要载入的片段，和位置