canvas介绍
1.什么是canvas（画布）
-----canvas是HTML5新增的元素，可用于通过使用JavaScript中得到脚本来绘制图形
-----canvas看起来和<img>元素很像，唯一不同的就是他并没有src和alt属性。实际上，<canvas>标签只有两个属性：width和height
-----<canvas>元素只是创造课一个固定大小的画布，要想在它上面绘制内容，我们需要找到他的渲染上下文，<canvas>元素有一个叫做getContext（）的方法，这个方法是用来获得渲染上下文和它的绘画功能
-----canvas图像的渲染有别于HTML的渲染，canvas得到渲染极快，不会出现代码覆盖后延迟渲染的问题，写canvas代码时，一定要要具有同步思想
注意：千万不要在css样式中指定画布的宽高
<script type="text/javascript">
window.onload = function (){
var testNode = document.querySelector("#test")
//判断是否有画笔
if(testNode.getContext){
var ctx = testNode.getContext("2d") ;
}
}
</script>绘制矩形
HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他的都图形的绘制都至少生成一条路径
<script type="text/javascript">
window.onload = function (){
var testNode = document.querySelector("#test")
if(testNode.getContext){
var ctx = testNode.getContext("2d") ;
}
//同步思维有别于浏览器本身的渲染机制
//设置图形的填充颜色
ctx.fillStyle = "deeppink"
//设置图形轮廓的颜色
ctx.strokeStyle = "pink"
//设置当前绘线的粗细。属性值必须为正数
ctx.lineWidth = 50
// 设定线条与线条间接合处的样式（默认miter）
//可选值: round 圆角 bevel 斜角 miter 直角
ctx.lineJoin = "bevel"
//绘制一个填充的矩形 fillRect() 不加单位
ctx.fillRect(0,0,100,100) //表示从0，0点 画一个100*100的矩形
//带边框的矩形
ctx.strokeRect(100,100,100,100) //这个边框是两个像素
// ctx.strokeRect(100.5,100.5,100,100) //边框一个像素
//清除指定矩形区域，让清除部分完全透明
ctx.clearRect(100,100,100,100)
//通过路径画矩形
ctx.rect(150,100,50,50)
ctx.fill()
}
</script>canvas绘制路径
-----图形的基本元素是路径，路径是通过不同颜色和宽度的线段或者曲线相连形成的不同形状的点的集合
canvas基本模板
1.路径容器
-----每次调用路径api时，都会往路径容器里做登记
-----调用beginPath时，清空整个路径容器
2.样式容器
-----每次调用样式api时，都会往样式容器里做登记
-----调用save时，将样式容器里的状态压入样式栈
-----调用restor时，将样式栈里的栈顶状态弹出容器里，进行覆盖
3.样式栈
注意：save（）和restore必须成对出现，在写样式设置之前必须写beginPath()来清除之前的路径
ctx.save();
//写关于样式的设置
ctx.beginPath()
//写关于路径
ctx.restore()closePath（）、moveTo（）、lineTo（）、fill（）、stroke（）
-----moveTo（x,y）:将笔触移动到指定的坐标
-----lineTo（x，y）：绘制一条当前位置到指定位置的直线
-----closePath（）：自动闭合路线
-----fill（）：通过填充路径的内容区生成的实现得到的图形，该方法会自动闭合路径
-----stroke（）：通过线条来绘制图形轮廓，该方法不会自动闭合路径
掌握以上方法即可做一个小练习（签名效果）
参考链接：https://blog.csdn.net/qq_44313091/article/details/102763885
圆、二次贝塞尔曲线、三次贝塞尔曲线
圆
-----arc（x，y，r，startAngle，endAngle，anticclockwise）：画一个以（x，y）为圆心的以r为半径的圆弧，从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。
-----arcTo（x1，y1，x2，y2）：根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。
二次贝塞尔曲线
-----quadraticCurveTo（cp1x，cp1y，x，y）：cp1x，cp1y为一个控制点，x,y为结束点
三次贝塞尔曲线
-----bezierCurveTo（cp1x，cp1y，cp2x，cp2y，x，y）：cp1x，cp1y为控制点一，cp2x，cp2y为控制点二，x，y为结束点
变换
-----translate：用来移动canvas的原点带一个不同的位置，在canvas中translate是累加的
-----rotate：这个方法只接受一个参数，旋转的角度，它是顺时针方向的，以弧度为单位得到值，旋转的中心点始终是canvas的原点，如果要改变它，需要用translate方法，在canvas中retate是累加的
-----scale：对画布进行缩放
放大：放大css像素的面积，使画布内css像素的个数变少，单个css像素所占据的实际物理尺寸变大
缩小：缩小css像素的面积，使画布内css像素的个数变多，单个css像素所占据的实际物理尺寸变小
可以通过canvas的变换做一个小练习
参考链接：https://blog.csdn.net/qq_44313091/article/details/102765432
掌握以上知识可以做一个时钟的链接，参考链接：https://blog.csdn.net/qq_44313091/article/details/102763981
引入图片
在canvas中插入图片，必须要等图片加载完才能操作
-----drawImage（img，0，0，img.width,img.height）:在0，0的位置插入图片img，宽高为图片的本身宽高
var img =new Image();
img.src ="../img/1.jpg"
img.onload = function(){
draw();
}
function draw (){
ctx.drawImage(img,0,0,img.width,img.height)
}使用背景
-----createPattern：在指定的方向内重复指定的元素
var img =new Image();
img.src ="../img/1.jpg"
img.onload = function(){
draw();
}
function draw (){
var pattern = ctx.createPattern(img,"repeat");
ctx.fillStyle= pattern
ctx.fillRect(0,0,1000,1000)
}渐变
线性渐变
-----createLinearGradient（x1，y1，x2，y2）：在x1，y1到x2，y2之间创建渐变对象
-----addColorStop(stop，color) ：规定 gradient 对象中的颜色和位置，stop介于0.0-1.0之间的值，表示渐变中开始于结束之间的位置，color表示在结束位置显示的css颜色值
var gradient = ctx.createLinearGradient(0,0,300,300)
gradient.addColorStop(0,"red")
gradient.addColorStop(0.5,"yellow")
gradient.addColorStop(1,"green")
ctx.fillStyle= gradient
ctx.fillRect(0,0,300,300)径向渐变
-----createLinearGradient(x1,y1,r1,x2,y2,r2)：创建放射状/圆形渐变对象，x1，y1，r1渐变的开始圆的坐标及半径，x2，y2，r2渐变的结束圆的坐标及半径
var gradient = ctx.createRadialGradient(150,150,50,150,150,100)
gradient.addColorStop(0,"red")
gradient.addColorStop(0.5,"yellow")
gradient.addColorStop(1,"green")
ctx.fillStyle= gradient
ctx.fillRect(0,0,300,300)绘制文本
-----fillText（）：在画布上绘制“被填充的文本”
-----strokeText（）：在画布上绘制文本（无填充）
-----measureText（）：返回包含指定文本宽度的对象
-----font：设置或返回文本内容的当前字体属性
-----textAlign：设置或返回文本内容的当前对齐方式
-----textBaseline：设置或返回在绘制文本时使用的当前文本基线
像素操作
ImageData对象：该对象中储存着canvas对象真是的像素数据，它包含一下几个只读属性
-----width：图片宽度，单位是像素
-----height：图片高度，单位是像素
-----data：数组，每一个像素点的rgba信息
将画布上的内容变成半透明
var image = ctx.getImageData(0,0,100,100)
for(var i=0; i<image.data.length;i++){
image.data[4*i+3] = 50
}
ctx.putImageData(image,0,0)-----createImageData：创建一个ImageData对象
-----putImageData：将像素数据写入画布
//默认创建出来的rgba(0,0,0,0)
var image = ctx.createImageData(100,100)
for(var i=0;i<image.data.length;i++){
image.data[4*i+3] = 255
}
//将像素数据写入画布
ctx.putImageData(image,0,0)
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
