Canvas3 绘图和重叠

视频课堂https://edu.csdn.net/course/play/7621

组合图形

绘制阴影

<canvas id="canvas" width="500" height="500"></canvas><script>function draw(){var c=document.getElementById("canvas");var ctx=c.getContext("2d");ctx.fillStyle="yellow";ctx.strokeStyle="yellow";var centerX=100;var centerY=100;var radius=50;var startAngle=0;var endAngle=2*Math.PI;//保存当前的绘图状态ctx.save();ctx.setTransform(1,0,-0.5,1,100,0);//开始绘图路径;ctx.beginPath();ctx.arc(centerX,centerY,radius,startAngle,endAngle,false);ctx.strokeStyle="white";ctx.stroke();ctx.fillStyle="rgba(0,0,0,0.2)";ctx.fill();//填充样式和填充完毕;ctx.restore();ctx.beginPath();ctx.arc(centerX,centerY,radius,startAngle,endAngle,false);ctx.stroke();ctx.fill();}window.addEventListener("load",draw(),true);</script>

<canvas id="canvas2" width="500" height="500"></canvas><script>function draw2(){var c=document.getElementById("canvas2");var ctx=c.getContext("2d");ctx.fillStyle="yellow";ctx.fillRect(0,0,100,100);ctx.fillStyle="blue";ctx.fill();ctx.globalCompositeOperation="source-over";//画圆;var centerX=100;var centerY=100;var radius=50;var startAngle=0;var endAngle=2*Math.PI;ctx.beginPath();ctx.arc(centerX,centerY,radius,startAngle,endAngle,false);ctx.fill();}window.addEventListener("load",draw2(),true);</script>

在绘制图形时，如果画布上已经有图形，就涉及到一个问题：两个图形如何组合。可以通过CanvasRenderingContext2D.globalCompositeOperation属性来设置组合方式

<canvas id="canvas3" width="500" height="500"></canvas><script>function draw3(){var c=document.getElementById("canvas3");var ctx=c.getContext("2d");ctx.fillStyle="yellow";ctx.save();//保存填充样式的颜色.ctx.shadowBlur=20;    //设置像素模糊值为20；ctx.shadowOffsetX=15;//横向值为15;ctx.shadowOffsetY=15;//纵向值为15；ctx.shadowColor="blue";ctx.fillRect(50,50,100,100);ctx.restore();ctx.fillRect(200,50,100,100);}window.addEventListener("load",draw3(),true);</script>

在绘制图形时，可以通过CanvasRenderingContext2D的一组属性设置图形的阴影

属性名	具体描述
shadowBlur	阴影的像素模糊值
shadowOffsetX	阴影在x轴上的偏移值
shadowOffsetY	阴影在y轴上的偏移值
shadowColor	阴影颜色值

Canvas3 绘图和重叠相关推荐

MATLAB（5）绘图
目录线图 plot 线型.线段颜色及标记线宽.标记点大小及颜色绘图位置 figure函数 tiledlayout函数标题 plot3 二维动图创建动态线条对象:animatedline 向动 ...
js插值计算_Python IDW插值计算及可视化绘制
前面几篇推文我们分辨介绍了使用Python和R绘制了二维核密度空间插值方法,并使用了Python可视化库plotnine.Basemap以及R的ggplot2完成了相关可视化教程的绘制推文,详细内容如 ...
emwin修改text字体颜色_Rggplot2 绘制带颜色条的相关性散点图
一个月的备考终于结束了,公号的推文也会陆续进行原创推文制作,也希望大家继续支持哦!本期推文就介绍一篇关于使用ggplot2 绘制带有颜色映射的相关性散点图,本期涉及的知识点如下: stat_bin_2 ...
R语言画图时常见问题
关注微信公共号:小程在线 CSDN的更新和微信公共号都会持续更新,CSDN博客没有数据集的链接: 关注CSDN博客:程志伟的博客 1 如何在同一画面画出多张图? 修改绘图参数,如 par(mfrow ...
150分钟学会R语言与R常见问题解答
序: 这篇文档内容的来源多样,既有来自于 R官方文档(包括 R intro,R data,R admin),也有来自于互联网的 contributed documents:还有若干来自于 Capit ...
iMeta | 华南农大陈程杰/夏瑞等发布TBtools构造Circos图的简单方法
点击蓝字关注我们定制Circos图:使用TBtools,从数据准备到可视化 https://onlinelibrary.wiley.com/doi/full/10.1002/imt2.35 ●20 ...
热图(Heatmap)绘制(matplotlib与seaborn)
热图是数据统计中经常使用的一种数据表示方法,它能够直观地反映数据特征,查看数据总体情况,在诸多领域具有广泛应用. 一:matplotlib绘制方法 1.基础绘制热图用以表示的是矩阵数据,例如相关阵. ...
对tabcontrol控件增强，添加关闭按钮功能、呼吸灯标签闪烁功能、类QQ消息数量标签提示TIP
在网上自绘tabcontrol的基础上增强,大部分代码写了注释. 关闭按钮的绘制思路:对padding属性修改以增加标签空白部分.在空白部分绘制十字,写个鼠标在十字区域点击关闭的事件以在适用控件时处理 ...
华南农大陈程杰/夏瑞TBtools最新文章在iMeta发表
点击蓝字关注我们定制Circos图:使用TBtools,从数据准备到可视化链接:https://onlinelibrary.wiley.com/doi/10.1002/imt2.35 引文:Ch ...

Canvas3 绘图和重叠

Canvas3 绘图和重叠相关推荐

最新文章

热门文章