首先我们先学习 canvas 的基本用法与属性 !
canvas就是 html5 提供的一个标签,他就是一个画布的作用, 可以用来通过js代码绘制的内容! canvas 默认的尺寸为 : 300 *150 ; 浏览器不兼容 canvas 的时候 ,canvas标签中的内容才会被显示出来 canvas 使用步骤: 1.获取到canvas 标签 2.获取到 当前canvas 标签的绘制上下文; var ctx=cv.getContext('2d') // 上下文 //getContext 可以被看成是一个工厂函数 3.调用上下文(对象)中的绘制 API进行绘制
简单绘制一条线步骤: moveTo // 将canvas 的画笔移动到某个起始点(x,y)
ctx.moveTo(100,100);如果没有moveTo 第一个lineTo就相当于 moveTo;描绘路径: ctx.lineTo(300,100) //(x,y) 描边: ctx.stroke() //将已经描绘的路径绘制到画布中 ____________________________ canvas 设置宽高的说明: 只有 两中方式: canvas 宽度和高度 // 指当前画布的垂直方向 和 水平方向的像素点的个数; 1.在canvas标签中通过HTML属性来进行设置; <canvas width='600' height='400'></canvas> 2.通过 js操作DOM 对象的width和height属性 cv.height=400; cv.width=600; canvas 不能通过样式来进行设置高度和宽度!!!(因为改变了每个像素点的大小) ____________________________ canvas 坐标系说明: 坐标系 以当前画布的左上角为原点 x,向右 变大 , y轴向下 变大; ____________________________ canvas 上下文: ctx 就相当于画图软件中的工具栏(提供大量绘图工具) ctx 就相当于 绘制图形的相关的各种API ____________________________
3D图形上下文 cv.getContext('webgl') //浏览器端处理3D图形的 绘制填充图形: ctx.fill(); // 没有闭合 ,会自动将图形闭合在填充 设置描边样式: ctx.strokeStyle='green'; ctx.stroke(); 设置填充样式: ctx.fillStyle='#fff'; ctx.fill(); 开启新路径: ctx.beginPath(); //相当于将之前绘制上下文中描绘的路径清除掉 非零环绕原则: 用来查看某个区域是否被填充的原则; 从要查看的区域引出一条射线,穿过整个图形,让这条线与图文相交; 以射线起点为圆心,顺着线绘制方法画圆; 逆时针 -1 ; 正时针 +1; 结果相加 : 为 0 说明此处不绘制 !!! 不为 0 说明绘制; 闭合路径: ctx.closePath(); 仅仅是在当前路径起始位置与结束位置之间做一条连线; 快速绘制矩形: ctx.rect(x,y,w,h) // x坐标 ,y坐标 ,宽 , 高 /仅仅描绘路径; //下面这两种方法不产生路径; ctx.strokeRect(x,y,w,h); // 快速绘制描边矩形; ctx.fillRect(x,y,w,h); //快速绘制填充矩形; 清除矩形: ctx.clearRect(x,y,w,h); //檫除画布中展示的内容 canvas的API中,只提供了一个清除绘制内容的方法:clearRect 作用:清除某个矩形区域里面的内容,仅仅是檫除展示的内容, 不会影响路径; canvas画图的方式: 绘制的时候是将整个画布的内容绘制出来 ,擦除的时候也是将 整个画布内容全部擦除,然后在重新绘制; ctx.clearRect(0,0,cv.width,cv.height) //清空整个画布 ____________________________ canvas 绘图: 是基于状态的! 路径和状态是完全不同的内容,不会互相影响! 开启新的路径(beginPath),不会影响到状态 ____________________________ 设置线宽: ctx.lineWidth=1; 默认线宽为1 像素,但是在画布中展示出来的是 2像素;(并且颜色会变淡) 屏幕中展示内容的最小单位是像素,最少也要展示1像素,通过canvas绘制 线的时候,是以当前坐标为中心点,分别向两边扩展线宽的一半(线宽为1, 会扩展0.5像素) ;屏幕会分别向上向下扩展1像素;并且颜色变淡; 绘制一像素的宽度的线,从0.5开始绘制即可! 绘制圆弧: ctx.arc(x,y,radius,startAngle,endangle,anticlockwise) 圆心点的 x,y 坐标// 半径的长度 //开始和结束的弧度 //绘制方向(默认顺false) 弧度 和角度的关系: 1弧度 表示180度; 用π来表示弧度; 1π=180° //Math.sin() / Math.cos() 参数也是弧度
角度:angle 弧度:radian 角度转弧度公式: radian = angle / 180 * π; 弧度转角度公式: angle = radian / π * 180 ; ____________________________ 绘制文字: 1. strokeText(text); ctx.strokeText('文字',100,100) ctx.font=''; //设置文字 字体 大小 ctx.measureText() //计算文字的宽度 2. fillText(text); 文字对齐方式: 文字水平对齐方式 ctx.textAlign='right/start/center' 默认start左对齐
<style> canvas{ direction : ltr/rtl }}</style> //文字从右往左/相反 end 与start 完全相反; ctx.textBaseline // 文字垂直对齐方式 小写字母x底边为文字的基线 ____________________________ 绘制图片 ctx.drawImage(image,dx,dy); (表示一个图片图像,x,y坐标) 步骤: 1. var img =document.createElement('img'); // var img=new Image(); 2. img.src='路径'; 3. img.οnlοad=function(){ ctx.drawImage(img,0,0); } // load事件 本篇文章连载 , 纯手打 , 欢迎改正!
