时间:2020年09月18日 | 作者 : aaronyang | 分类 : web前端 | 浏览: 1105次 | 评论 0 人
====================www.ayjs.net 杨洋 wpfui.com ayui ay aaronyang=======请不要转载谢谢了。=========
向Canvas的当前路径上添加一段贝塞尔曲线(贝兹曲线或贝济埃曲线)
bezierCurveTo(double cpX1,double cpY1,double cpX2,double cpY2,double x,double y)
开始点
第一个控制点cpX1,cpY1
第二个控制点cpX2,cpY2
结束点 x,y
向Canvas的当前路径上添加一段二次曲线
quadraticCurveTo(double cpX,double cpY,double x,double y)
开始点
控制点cpX,cpY
结束点 x,y
请看代码
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>ay curveto</title> </head> <body> <div> <canvas id="mc" width="420" height="280" style="border:1px solid black"> </canvas> </div> <script type="text/javascript"> function createFlower(ctx,n,dx,dy,size,length) { ctx.beginPath(); ctx.moveTo(dx, dy+size); var dig=2*Math.PI/n; for (var i = 1; i < n+1; i++) { var ctrlx=Math.sin((i-0.5)*dig)*length+dx; var ctrly=Math.cos((i-0.5)*dig)*length+dy; var x=Math.sin(i*dig)*size+dx; var y=Math.cos(i*dig)*size+dy; ctx.quadraticCurveTo(ctrlx,ctrly,x,y); } ctx.closePath(); } var canvas = document.getElementById("mc"); var ctx = canvas.getContext("2d"); createFlower(ctx,5,70,100,30,80); ctx.fillStyle="#F00"; ctx.fill(); createFlower(ctx,6,200,100,30,80); ctx.fillStyle="#dd0"; ctx.fill(); createFlower(ctx,7,330,100,30,80); ctx.fillStyle="#f0f"; ctx.fill(); </script> </body> </html>
DrawImage(Image image,double x,double y)
把图片绘制到x,y处,不缩放,保持原大小
DrawImage(Image image,double x,double y,double width,double height)
把图片绘制到x,y处,根据width和height缩放
DrawImage(Image image,integer sx,integer sy,integer sw,integer,sh,double dx,double dy,double dw,double dh)
从image上 挖出 一块图
sx,sy从哪个位置开始
sw,sh挖的宽度和高度,类似C#的rect类型,左上角坐标,然后宽高
dx,dy绘制到canvas的哪个位置
dw,dh 绘制完指定宽高缩放
var image=new Image();
var image=new Image(宽,高);
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>ay drawimage</title> </head> <body> <div> <canvas id="mc" width="600" height="400" style="border:1px solid black"> </canvas> </div> <script type="text/javascript"> var canvas = document.getElementById("mc"); var ctx = canvas.getContext("2d"); var image = new Image(); image.src = "http://www.wpfui.com/abl/o_37.jpg"; image.onload = function () { ctx.drawImage(image, 20, 10); ctx.drawImage(image,200,10,70,100); var sd=50; var sh=66; ctx.drawImage(image,80,100,sd,sh,285,10,sd*3,sh*3); } </script> </body> </html>
类似wpf的transform
translate(double dx,double dy) 平移
scale(double dx,double sy) 缩放
rotate(double angle) 旋转
transform(double m11,double m12,double m21,double m22,double dx,double dy) 矩阵变换
多次变换,保存状态
save(); 保存当前的绘图状态
restore(); 恢复之前保存的绘图状态
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>ay drawimage</title> </head> <body> <div> <canvas id="mc" width="600" height="400" style="border:1px solid black"> </canvas> </div> <script type="text/javascript"> var canvas = document.getElementById("mc"); var ctx = canvas.getContext("2d"); ctx.fillStyle="rgba(0,255,0,0.3)"; ctx.translate(30,200); for (let index = 0; index < 50; index++) { ctx.translate(50,50); ctx.scale(0.93,0.93); ctx.rotate(-Math.PI/10); ctx.fillRect(0,0,150,75); } </script> </body> </html>
关于矩阵变换的效果,自己看看。
restore和save,后面会遇到
globalCompositeOperation
这个类似wpf的 geometry的重合后怎么处理。
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>ay drawimage</title> </head> <body> <div> <canvas id="mc" width="600" height="400" style="border:1px solid black"> </canvas> </div> <script type="text/javascript"> var canvas = document.getElementById("mc"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "red"; ctx.fillRect(20, 20, 75, 50); ctx.globalCompositeOperation = "source-over"; ctx.fillStyle = "blue"; ctx.fillRect(50, 50, 75, 50); ctx.fillStyle = "red"; ctx.fillRect(150, 20, 75, 50); ctx.globalCompositeOperation = "destination-over"; ctx.fillStyle = "blue"; ctx.fillRect(180, 50, 75, 50); </script> </body> </html>
source-over和destination-over
source-over,新绘制的在顶层。 默认值
destination-over:新绘制的放在原来的后面
下面都是先画红色,再蓝色的
source-in 新的和原来做in计算,只显示 重叠部分,其他部分透明
destination-in 原图形和新的做in计算,只显示重叠部分
source-out 新和原 做out运算,只显示 非重叠部分。
destination-out 原和新 做out运算,只显示 非重叠部分。
source-atop 只绘制 新与原重叠部分和 原图形未被覆盖的部分。
destination-atop 只绘制 原与新重叠部分和 新图形未被覆盖的部分。
lighter 新的和原都挥之,重叠部分绘制两种颜色值相加的颜色
xor 绘制新与原不重叠的部分。重叠地方变透明
copy 只绘制新图形
具体参考:https://www.w3school.com.cn/tags/canvas_globalcompositeoperation.asp
我看书上demo还有个clearRect(0,0,400,200);
清空一个位置的图案
<script type="text/javascript"> var canvas = document.getElementById("mc"); var ctx = canvas.getContext("2d"); ctx.save(); ctx.translate(30,20); var lg=ctx.createLinearGradient(0,0,160,80); lg.addColorStop(0.2,"#F00"); lg.addColorStop(0.5,"#0F0"); lg.addColorStop(0.9,"#00F"); ctx.fillStyle=lg; ctx.fillRect(0,0,160,80); ctx.restore(); ctx.translate(280,160); ctx.arc(0,0,80,0,Math.PI*2,true); ctx.closePath(); ctx.lineWidth=12; var lg2=ctx.createLinearGradient(-40,-40,80,50); lg2.addColorStop(0.1,"#FF0"); lg2.addColorStop(0.4,"#0FF"); lg2.addColorStop(0.9,"#F0F"); ctx.strokeStyle=lg2; ctx.stroke(); </script>
前面这个数字是百分比,这条色带,0.2就是 20%是F00颜色的,然后0.2-0.5这个区间是0f0颜色的,以此类推。
====================www.ayjs.net 杨洋 wpfui.com ayui ay aaronyang=======请不要转载谢谢了。=========
也就是fillStyle可以渐变的,也可以是纯色,
关于var lg=ctx.createLinearGradient(0,0,160,80); 这个代码
也就是从0,0 坐标 到 160,80这个坐标,定义个渐变的方向,2个坐标决定一个矢量。
下面这个是wpf的
startpoint就是这里的第一个坐标,endpoint就是第二个
h5当然也有径向渐变。
createRadialGradient
由于我重点不是学h5绘图部分,主要还是做业务系统,这块就到这里,感兴趣的自己折腾
后面的
位图填充,类似wpf的 viewport,viewbox,区域图,然后怎么平铺
还有位图处理,类似wpf的control的clip属性,传入path路径,任意形状的图形
像素处理,类似wpf的shadereffect效果
输出位图
canvas.toDataURL("image/png")
修改代码:
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>ay drawimage</title> </head> <body> <div> <canvas id="mc" width="600" height="400" style="border:1px solid black"> </canvas> <br/> <image id="result" src="" alt="图片输出" crossOrigin="Anonymous"/> </div> <script type="text/javascript"> var canvas = document.getElementById("mc"); var ctx = canvas.getContext("2d"); ctx.save(); ctx.translate(30,20); var lg=ctx.createLinearGradient(0,0,160,80); lg.addColorStop(0.2,"#F00"); lg.addColorStop(0.5,"#0F0"); lg.addColorStop(0.9,"#00F"); ctx.fillStyle=lg; ctx.fillRect(0,0,160,80); ctx.restore(); ctx.translate(280,160); ctx.arc(0,0,80,0,Math.PI*2,true); ctx.closePath(); ctx.lineWidth=12; var lg2=ctx.createLinearGradient(-40,-40,80,50); lg2.addColorStop(0.1,"#FF0"); lg2.addColorStop(0.4,"#0FF"); lg2.addColorStop(0.9,"#F0F"); ctx.strokeStyle=lg2; ctx.stroke(); document.getElementById("result").src=canvas.toDataURL("image/png"); </script> </body> </html>
j就可以拖动输出的图片,进行保存
我们可以设置style="display: none;" 隐藏canvas
就可以矢量图,图片化
接下来的动画制作,
基于定时器的动画,
基于requestAnimationFrame的动画
这些如果你是玩效果的,可以学习下
关联的wpf的曲线文章
[ay的wpf]写给自己的wpf高级教程 [14]-弧-ArcSegment[1/3]
[ay的wpf]写给自己的wpf高级教程 [15]-弧-贝塞尔-BezierSegment[2/3]
[ay的wpf]写给自己的wpf高级教程 [16]-弧-贝塞尔-BezierSegment[3/3]
推荐您阅读更多有关于“web前端,”的文章
抖音:wpfui 工作wpf
目前在合肥企迈科技公司上班,加我QQ私聊
2023年11月网站停运,将搬到CSDN上
AYUI8全源码 Github地址:前往获取
杨洋(AaronYang简称AY,安徽六安人)和AY交流
高中学历,2010年开始web开发,2015年1月17日开始学习WPF
声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费
查看捐赠AYUI7.X MVC教程 更新如下:
第一课 第二课 程序加密教程
额 本文暂时没人评论 来添加一个吧
发表评论