分类 默认分类 下的文章

简单封装的一个圆形显示进度条的canvas动画

紧张的10月份过去了.虽然11月份仍然很紧张,不过还是想做点自己想做的事情.
时间不多,我的坦克大战小游戏依然没有时间继续开发.今天用canvas封装了一个圆形进度条显示.

先给个demo链接地址:http://demo.fengyitong.name/circle_total/

圆形进度条

代码就不多说了,demo里面可以直接下载了看,代码加上空格数,注释数撑死也才200行....

效果还是不错的.

调用也很简单:

        var cx = new $.CircleAnimate({
            el: doms[i],
            maxValue: 255,    //最大值
            value: 0,        //当前值
            color: "#fff", //外圈底色
            colorAlpha: 0.8, //外圈底色透明度
            outColor: "red", //外圈颜色
            outAlpha: 0.5, //外圈透明度
            outRadius: 0.5, //外圈内半径比
            innerColor: "rgb(255,255,0)", //内圈颜色
            innerAlpha: 0.7, //内圈透明度
            innerScale: 0.5, //内圈半径比例
            speed: 4, //速度.(每次加减值大小.)
            fontColor: '#000' //字体颜色.
        });

接着封装了一个简单的cx.setValue(150); 来实现圆的动画效果.
性能应该还可以,毕竟是canvas原生封装的.
废话不多说了准备睡觉.喜欢的人可以自己下载代码.

AuthorizeAttribute权限配置入门

十月份做一个项目忙傻掉了.....

趁着10月还有最后一天,写个文章,虽然已经很懒了,但是一个月一篇都不写总说不过去....

做webapi,绕不过的肯定是验证机制,权限的管理很麻烦,.net帮我们集成了一个验证标签AuthorizeAttribute,用起来很方便

他里面可以通过给页面或者请求接口标签[Authorize(Users,Roles)]
加Users或者Roles权限,来实现自动给配置.
不过这个看看就过去吧,这样配意味着很难维护了.想加个角色,配下权限还要改代码..
可以自己写一个验证继承AuthorizeAttribute标签:
他下面几个方法要重写:
OnAuthorization 当用户访问请求时调用,他内部会调用IsAuthorized去验证是否合法.

IsAuthorized 这里就可以通过权限表去验证,返回true即请求合法,否则不允许请求

HandleUnauthorizedRequest 这个也可以重写一下,当IsAuthorized返回false的时候,会执行该方法,该方法可以返回401要求验证或者直接返回登录页面.

c# webapi 设置输出的class属性

平时做项目的时候大多数时候喜欢用webapi+html静态页面开发
这样的话开发移动端会比较方便

webapi在直接输出类的时候,会序列化所有属性,
底层是通过Newtonsoft.Json来实现的
于是就可以通过给class设置标签来让webapi不序列化某个属性.

[JsonObject(MemberSerialization.OptOut)]
public class LoadModel
{
    [JsonIgnore]
    public HttpPostedFileBase file { get; set; }

    [JsonProperty]
    public string base64 { get; set; }

    [JsonProperty]
    public string type { get; set; }

    public string title { get; set; }
}

当class设置标签为[JsonObject(MemberSerialization.OptOut)]时,属性标签为[JsonIgnore]的不会被序列化

当class设置标签为[JsonObject(MemberSerialization.OptIn)]时,属性标签为[JsonProperty]的会被序列化

一般我喜欢用[JsonObject(MemberSerialization.OptOut)],因为基本上都是要输出的嘛,个别会不输出而已..

canvas如何画出像素为1的线条

先来看一下平时我们html页面上的标签实现1px像素是怎么样的:

<p style="border-bottom: 1px solid #000000;"></p>

1px像素的线条

现在我们放一个canvas标签,画1像素宽的线条看一下:

<body>
    <p style="border-bottom: 1px solid #000000;"></p>
    <canvas id='canvas' width="300" height="100"></canvas>
</body>
<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext('2d');
    ctx.lineWidth = 1;

    writeLine(0, 10, 300, 10);

    function writeLine(x1, y1, x2, y2) {
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);

        ctx.stroke();
    }
</script>

canvas画出来的线条

真的好诡异啊,竟然不是1像素的宽度,颜色也有问题....

然后就想着是不是canvas不支持1px像素?再试着画一个宽度为1像素的矩形

ctx.fillRect(0, 20, 300, 1);

画一个宽度为1像素的矩形

发现又好了....太诡异了= =

不停的查资料,后来不断尝试中想到原因:
canvas画线时,是以你的坐标点为中心,左右扩散,来画线的,也就是说他实际是画了一个0,9.5;0,10.5;300,10.5;300,9.5这样一个矩形

这个情况下,因为反锯齿的处理,画布自动帮你填充为了0,9;0,11;300,11;300,9
所以看起来就像是宽了,并且颜色变淡了...

知道原因了,那么来验证一下:

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext('2d');
    ctx.lineWidth = 1;

    writeLine(0, 10, 300, 10);

    ctx.fillRect(0, 20, 300, 1);

    writeLine(0, 30.5, 300, 30.5);

    function writeLine(x1, y1, x2, y2) {
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);

        ctx.stroke();
    }

线条4

恩,总算是正常了...那么以后,画奇数宽度的线条时就需要注意了:要不就是选点偏移0.5,要不就是整个画布偏移0.5
注意画水平线是x轴偏移,画垂直的时候就是y轴偏移了,保险起见的话,可以两个都偏移:

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext('2d');
    ctx.lineWidth = 1;
    ctx.translate(0.5, 0.5);

    writeLine(0, 10, 300, 10);

    function writeLine(x1, y1, x2, y2) {
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);

        ctx.stroke();
    }

c# web配置允许跨域方法

浏览器因为安全原因,默认不允许js代码跨域请求.如果要跨域只能用jsonp.
还可以通过配置web.config文件添加自定义头部来实现允许跨域请求.

如下,在system.webServer标签下添加:

<system.webServer>
<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="*" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE" />
  </customHeaders>
</httpProtocol>
</system.webServer>