Web全栈20210127-canvas

https://www.canvasapi.cn/ canvas绘图api <canvas></canvas>
功能全是js代码实现–在canvas上进行绘图，web系统—数据表分析，可以写特效，网页游戏 canvas-cocos-2d，地图api，都会使用到canvas
1-1随机改变画布的高度width，height。<canvas style="background:green;"></canvas>
关键JavaScript代码：canvas.height = 50 + 100 * Math.random();
== 注意：不要直接使用style给 canvas元素设置宽高（元素的大小）==
1-2getContext()
会创建并返回一个CanvasRenderingContext2D对象，主要用来进行2d绘制，也就是二维绘制，平面绘制。
getContext 返回绘制模型
参数是 2d CanvasRenderingContext2D 模型 2d绘图二维的平面绘图
‘webgl’ 3D绘图加速渲染3D 模型
1-3toDataURL() 是将画布转化为Base64 图，默认值是image/png，还可以是image/jpeg
2D模型的属性：
2-1. 在对象CanvasRenderingContext2D的原型对象上可以添加方法直接调用使用
2-2. context.canvas 返回当前操作的canvas对象（只读）console.log(context.canvas);返回的是canvas对象
2- 3. fillStyle 填充样式默认有颜色是#000 context.fillStyle = color;
2-4. font 设置绘制文本字体控制默认大小10px context.font = '24px SimSun, Songti SC';
2-5.globalAlpha 设置全局透明度 0-1
2-6. globalCompositeOperation 改变canvas绘图的混合模式
2-7. lineCap 线条端点的样式
2-8.lineJoin 线条转角的样式，类似于折线
2-9.lineWidth 设置线宽
2-10.shadowBlur 阴影的模糊程度 conText2D.shadowBlur = 10;
2-11.shadowColor 阴影的颜色 conText2D.shadowColor = 'blue';
2-12.shadowOffsetX 阴影x方向偏移conText2D.shadowOffsetX = 10;
2-13.shadowOffsetY 阴影y方向偏移
2-14.strokeStyle 描边样式 conText2D.strokeText('描边文字', 200, 100, 300);
2-15.textAlign 绘制文本的对齐方式
2-16.textBaseline 绘制文本的基线方式 conText2D.textBaseline = 'bottom';底线
2D模型的方法：
3-1.arc用来画圆，圆弧

  //绘制圆弧
    conText2D.beginPath();
    //    conText2D.arc(600, 100, 50, 0, Math.PI * 2, true);
    conText2D.arc(300, 100, 50, 0, Math.PI *2, false);//圆心坐标，半径，起始角度，true是逆时针
    conText2D.fill();//实心
    conText2D.closePath();

3-2.fillText 绘制纯文本 conText2D.fillText('helle world!',50,50,100)//50,50,表示绘制的坐标,100表示最大宽
3-3.strokeText 绘制描边文本
3-4.fill 内部填充
3-5.stroke 填充描边
3-6.arcTo 绘制圆弧

   conText2D.beginPath();
    conText2D.lineWidth - 5;//线宽为5
    conText2D.moveTo(100, 100);
    conText2D.arcTo(100, 140, 150, 200, 13);
    conText2D.lineTo(200, 200);
    conText2D.stroke();//填充线
    conText2D.closePath();

3-7.bezierCurveTo 绘制贝塞尔曲线
3-8.绘制区域 fillReact
3-9.清除区域 clearReact
3-10.clip 剪裁先设置裁剪路径
3-11.createImageData 创建image图像数据
putImageData 绘制 imageData对象到指定位置
3-12.save 保存当前canvas的状态在栈的最上面
restore 一次从栈的上面取出canvas的状态
3-13rotate translate scale

总结：1.clearRect相当于橡皮擦
2.drawImage绘制图片

Web全栈20210127-canvas

猜你喜欢