描边

canvas 画布使用

那年仲夏 提交于 2020-03-20 11:51:28
canvas 标签 使用js 在上面绘制图形以及动画 属性 width height 设置canvas 的大小 和css不一样 设置的是canvas 画布的大小 var canvas = document.querySelector("#canvas"); //设置canvas 画布大小 canvas.width = 700; canvas.height = 400; //设置canvas的模型为2d模型 var context = canvas.getContext("2d"); //1设置图 形填充的样式 // context.fillStyle="#e30000"; //2绘制一个矩形 // context.fillRect(0,0,100,50); // context.fill()//是填充点先路径的 // 绘制圆弧 context.beginPath(); //开始路径 context.fillStyle="green"; context.arc(350,200,100,0,Math.PI*2,true); context.stroke();//绘制描边的 context.fill();//使用样式填充圆的 context.closePath();//闭合路径 //绘制线条 context.beginPath(); context.strokeStyle="red";/

常用特效【面试用】

核能气质少年 提交于 2020-03-05 07:35:07
SSAO 还原屏幕空间的每个点的世界坐标,通过法线,随机采样某个上半球范围里的一些3D点,把这些点投影到像素平面,取对应地方的深度,通过这些深度与当前着色点深度的差异来计算AO值 视差映射 天空盒渲染 简单的做法是最先渲染,但是不效率,这代表着,被遮住的也要渲染,即使几乎完全被遮住。最效率的做法是最后渲染天空盒。做法如下: Vertex Shader中使用代码 ndc_pos = pos.xyww; 这时候,z总是会被写为1.在渲染的时候,把深度测试改为小于或者等于( 因为深度图总被clear成1.【stencil是0】 ) 描边 使用Object缩放进行描边 渲染所有对象,Stencil无条件全部写1,关闭深度test,关闭stencil写,在Stencil不为1的地方( 之前没有被画过的地方 ),把要描边的对象放大一点点,用纯色shader渲染一遍。 阴影图 Bias,要往深度视线方向移一点,避免某些平面上因为shadow map分辨率有限产生的交替现象。考虑投影在一平面上的shadow map,视点转换到深度灯光相机时,是同一个深度。 Bias方法消除闪烁会因为bias过大产生物体飞起来的现象,此时可以使用另外一种方法来解决,就是在渲染shadow map的时候使用front cull,此时渲染时候与shadow map的时候处在同一表面的点就不再处于同一点了

selector 及 Shape 小结

陌路散爱 提交于 2020-02-29 07:49:31
在Android程序开发中,我们经常会去用到Shape这个东西去定义各种各样的形状,首先我们了解一下Shape下面有哪些标签,都代表什么意思: solid:填充 android:color 指定填充的颜色 gradient:渐变 android:startColor和android:endColor分别为起始和结束颜色, android:angle是渐变角度, 必须为45的整数倍 。 另外渐变默认的模式为android:type="linear",即线性渐变, 可以指定渐变为径向渐变,android:type="radial",径向渐变需要指定半径android:gradientRadius="50"。 angle值对应的位置如图: stroke:描边 android:width="2dp" 描边的宽度,android:color 描边的颜色。 我们还可以把描边弄成虚线的形式,设置方式为: android:dashWidth="5dp" android:dashGap="3dp" 其中android:dashWidth表示'-'这样一个横线的宽度,android:dashGap表示之间隔开的距离 corners:圆角 android:radius为角的弧度,值越大角越圆。 我们还可以把四个角设定成不同的角度, 同时设置五个属性,则Radius属性无效 android:Radius=

如何制作行政区划矢量图(shp格式)

左心房为你撑大大i 提交于 2020-02-14 23:24:48
详细图文ArcGIS10.2破解版教程地址: http://jingyan.baidu.com/article/e73e26c0cb5c1324adb6a791.html 有时候想要一张shp格式的地方行政区划矢量图,但苦于网络资源有限,找得到的可能不够满足需求,更多时候是难以找到,这时唯有自力更生了!下面我将分享一种方法,通过用GIS软件创建shapefile文件并进行编辑描边,以达到目的。 工具/原料 ARCGIS10.2 行政区划图.jpg 添加图片 1 文件不能直接“打开”。 开启GIS后,选择标准工具条里的黑十字形图标,弹出“添加数据”对话框,找到你的图片并点击“添加”,以此在软件添加图片。 2 在添加过程会弹出“未知的空间参考”警告框,这是因为没有对图片进行空间参考编辑,即选定坐标系,但是对接下来的步骤不造成影响,所以可点击“确定”,进行下一步。 END 新建Shapefile 1 调出“目录”窗口,选择你要在其中新建shapefile的 文件夹, 右键——“新建”——“Shapefile(S)...” 2 在弹出的“创建新Shapefile”窗口中,先对文件进行命名,然后选择“ 面 ”要素类型,然后“确定”。(为了使制图过程更加顺利地完成,空间参考的编辑可先不用管。) 3 因为没有编辑空间参考,所以依旧会弹出警告窗口,点击“确定”跳过即可

Photoshop绘制精致金属边框水晶球按钮

限于喜欢 提交于 2020-02-10 04:09:37
  下面开始制作:   在PS中新建立一个250*250的文件,背景色选用白色。   创建一个新图层命名为“颜色渐变”。   按CTRL+R打开标尺,从X,Y轴分别拖拉出参考线,将参考线移动至文件中心位置,然后在中心位置按SHIFT+ALT键用椭圆选区工具作出正圆选区。(在拉出椭圆选区之前,先在把选择区在属性栏的数值样式设置为固定大小为152*152像素)   按CTRL+H暂时隐藏参考线。   在“颜色渐变”图层中用渐变工具在选择区内作出由黑到白的渐变,注意下拖动的方向。   结果因该和下面这样差不多   在保持选择的情况下建立一个新图层命名为“内阴影”,并用黑色对内部进行描边2像素处理(编辑-描边),然后用高斯模糊3个像素(滤镜-模糊-高斯模糊)。   按CTRL+D取消选择。   下面来制作内部的高光和反射光。   新建立一个图层组叫做球内高光。   在图层组中建立一个图层名为“底部高光”。   在创建另一个新图层,暂不用命名。   在这个未命名的图层中,用椭圆工具建立一个固定大小为190*160像素的选择区,并用黑色填充,位置就象以下这样:   现在回到“底部高光”上这个图层上来进行编辑。   按CTRL单击颜色渐变图层,载如其选择区。   将这个圆形选择区收缩2个像素。(选择-修改-收缩)   现在按住CTRL+ALT键的点击之前做的那个未命名的黑色椭圆选区

图层样式

北慕城南 提交于 2020-02-06 18:01:31
图层样式 图层样式:附加在图层上的一个效果。 主要分为三大部分: 具体效果,混合选项,使用技巧 来理解图层样式。 具体效果: 浮雕类,阴影类,发光类,叠加类和其他类 。 选中图层之后,在图层后面的 空白区域双击 就可以打开图层样式。 斜面浮雕 :给形状加上一个厚度或者理解为浮雕的效果。其数值分为两大块:结构用来控制斜面大小形状等等;阴影用来控制斜面浮雕的颜色深浅等等。 先用形状工具画出一个形状,再具体来试一试。 在样式处 内斜面:从图层边缘往内做一个斜面; 外斜面:从图层边缘往外做一个斜面; 浮雕效果:综合了内外斜面的效果; 枕状浮雕:根据图层边缘做一个雕刻的感觉; 描边浮雕:用了描边浮雕本来是没有效果的,必须把“描边”打开,给它加上,描边浮雕才有变化。 以上便是斜面浮雕的五个样式。 下面的 方法 一般用默认就可以。 方向:浮雕往上凸还是往下凹; 深度大小和软化分别调整浮雕的深度还有大小以及羽化程度; 角度和高度是控制光源的角度和位置的; 高光模式和阴影模式是控制亮部和暗部的模式; 不透明度就是调节不透明度的,也可以在后面调整它的颜色。 下面接着是光泽等高线,左边还有一个等高线。 等高线:控制斜面的结构,先随机点一个预设, 双击可以点进去调整 ,当调整曲线的时候,浮雕的结构会发生变化,既 等高线是决定浮雕结构的 ; 光泽等高线: 调整浮雕的明暗效果 ,把线条往上拉,它会整体效果变亮

android 背景边框变圆角

喜你入骨 提交于 2020-01-31 01:07:55
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android=" http://schemas.android.com/apk/res/android "> <stroke android:width="5dip" android:color="#FFFF00" /><!-- 描边 :边框宽度与颜色 --> <padding android:left="20dip" android:top="0dip" android:right="0dip" android:bottom="0dip" /><!-- 主要内容的padding 文字距离上下左右的距离 --> <corners android:topLeftRadius="15dip" android:topRightRadius="15dip" android:bottomLeftRadius="0dip" android:bottomRightRadius="0dip"/><!-- 圆角的半径 也可以统一设置半径 android:radius="9dip"--> <gradient android:startColor="#ff8c00" android:endColor="#FFFFFF" android:angle="270" /> <!-- 渐变 -->

利用PS制作旋转水晶球gif图

被刻印的时光 ゝ 提交于 2020-01-11 06:56:27
起因 临近考试复习数学心态大崩。就弄了一个别的放松一下。 我是借鉴的 PS制作漂亮的旋转水晶球gif动画教程 制作的。 不过我用到PS版本是Photoshop CC 2018,有一些细节与文中不同。 记录一下制作步骤,以后用到的话回来拿。哈哈哈哈 成品效果 第一次做,做的不是特别成功,有些卡顿,奇奇怪怪的,不过大体流程是这样的。 制作步骤 将图片在 Photoshop 中打开 选中背景图,使用 Ctrl + j 快捷键,创建两个图层。为了方便后续图层操作,我们先将背景图隐藏。 选择移动工具。分别选择两个背景图后,按住 Shift 键,将两个图层移动到左右两侧。(注意:选中图层后再按住 Shift ,不然可能会遇到同时移动两个图层等问题) 选择 矩形选框工具 ,在图层1的边界处,选择一块矩形区域,并进行羽化(羽化值可以自己确定),之后按住 Del/Delete 键删除,删除后图层1边界羽化完成。将矩形区域移动到图层1拷贝处,重复操作。 ① 选择矩形选框工具 ② 选择图层 1边界的一块矩形区域后,右键选择羽化。 ③ 完成②后,点击 Del/Delete 删除矩形区域,完成图层1羽化。 ④ 点击图层 1 拷贝,然后将矩形区域移动到图层 1 拷贝的边界 ⑤ 点键盘 Del/Delete 删除。 ⑥ 右键选择区域,选择取消选择。 按住 Shift 调整两个图层位置,让中间部分重合后

canvas 简介

孤街醉人 提交于 2020-01-10 09:51:23
Canvas的概述 定义 <canvas> 是H5新增的标签 canvas提供给了 javascript 绘图接口 canvas绘图建立在坐标系上 应用领域 炫酷特效、banner 可视化数据(图表) 游戏 大型应用(地图) 在线系统 (在线PS ) canvas标签 属性 width 属性 height 方法 getContext() 可选的参数 "2d" / "webgl" 返回上下文环境 绘图环境 该对象提供API,让JavaScript来绘制图形 绘图基础 路径的开启和闭合 beginPath() 开启路径 closePath() 关闭路径 (把路径闭合) 设置起点 moveTo(x, y) 画线 lineTo(x , y) 绘制直线 描边 lineWidth 属性 设置描边线的粗细 strokeStyle 属性 设置描边颜色 stroke() 绘制 填充 fillStyle 属性 填充颜色 fill() 执行填充 快速矩形 rect(x, y, width, height) 绘制矩形路径 strokeRect(x, y, width, height) 描边矩形 fillStroke(x, y, width, height) 填充矩形 clearRect(x, y, width. height) 清除矩形 (可以用来清除屏幕) 圆弧 arc(x, y, radius,

canvas基础知识点(一)

一笑奈何 提交于 2019-12-14 16:34:44
给canvas设置宽高: canvas标签的宽高默认是300*150,是一个行内块元素 可以在canvas标签上通过width,height来设置 可以在js中给dom对象设置: mycanvas.width = 500 mycanvas.height = 500 注意:不要通过css来调整canvas的宽高,导致内部的canvas画布被拉伸,图形变形 获取画笔工具: canvas绘图都是通过canvas标签的画笔来进行的 var ctx = canvas.getContext('2d') 注意,不要写成getContent,里面传入的参数目前也只有2d这一种情况 3、 描边和填充 canvas绘制图形都是绘制的路径,看不见摸不着的一种东西,需要进行描边或填充之后才能看到真正的图形 如果绘制图形的路径在绘制完成后没有闭合,继续绘制路径的时候会首尾相连 在填充的时候如果路径依然没有闭合,会将路径的闭合区域填充 ctx.fill()//填充 ctx.stroke()//描边 可以调整ctx.strokeStyle,ctx.fillStyle属性来更改填充,描边的颜色,值为颜色值(rgb,rgba,word,16进制) 绘制矩形 ctx.rect(x,y,w,h) canvas的坐标系起点是左上角,x轴向右正方向,y轴向下正方向 x,y代表的是矩形起点(左上角)的位置,w,h就是宽高