<!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

         <script type="text/javascript">

             function draw(id){

                 var canvas = document.getElementById(id);

                 if(canvas == null){

                     return false;

                 }

                 var context = canvas.getContext('2d');

                 context.fillStyle = '#eeeeff';

                 context.fillRect(0,0,400,300);

                 var dx = 150;

                 var dy = 150;

                 var s =100;

                 context.beginPath();

                 context.fillStyle = 'rgb(255,0,0)';

                 context.strokeStyle = 'rgb(0,0,0)';

                 var x = Math.sin(0);

                 var y = Math.cos(0);

                 var dig = Math.PI/15*11;

                 for(var i=0;i<30;i++){

                     var x = Math.sin(i*dig);

                     var y = Math.cos(i*dig);

                     context.lineTo(dx+x*s,dy+y*s);

                 }

                 context.closePath();

                 context.fill();

                 context.stroke();

             }

         </script>

     </head>

     <body onload="draw('canvas');">

         <canvas id="canvas" width="400" height="300"></canvas>

     </body>

 </html>

canvas锯齿的更多相关文章

  1. Canvas锯齿问题

    canvas的宽高必须通过HTML属性指定,不能通过CSS指定,否则会有锯齿 这个是通过CSS定义宽高,绘制的图形 #myCanvas{ background: black; height: 800p ...

  2. Canvas 画占比图 解决canvas锯齿 bug

    案例如图: <section class=" chartWrap"> <div class="chartContent"> <di ...

  3. Canvas处理头像上传

    未分类 最近社区系统需要支持移动端,其中涉及到用户头像上传,头像有大中小三种尺寸,在PC端,社区用Flash来处理头像编辑和生成,但该Flash控件的界面不友好而且移动端对Flash的支持不好,考虑到 ...

  4. android通过Canvas和Paint截取无锯齿圆形图片

    一个通过Canvas和Paint截取无锯齿圆形图片. /** * 根据原图和变长绘制圆形图片 * * @param source * @param min * @return */ public st ...

  5. Canvas 2D绘制抗锯齿的1px线条

    当绘制1像素的线条时,发现多条线明显存在着粗细不均的问题,线条带有明显的锯齿. 事实上,Canvas的绘制线条指令都存在这个状况,如lineTo,arcTo,strokeRect. 解决方案是将Can ...

  6. canvas画圆类似于锯齿指针 angular5

    拿到图的时候大致是这样的,里面的圆是有动态效果的,考虑到gif图耗资源,于是想要用canvas画出来: 仔细看图不难发现,这个锯齿圆类似于表盘,计算好弧度,不难实现: 因为项目现在用的框架是angul ...

  7. html5 canvas 画图移动端出现锯齿毛边的解决方法

    使用HTML5的canvas元素画出来的.在移动端手机上测试都发现画图有一点锯齿问题 出现这个问题的原因应该是手机的宽是720像素的, 而这个canvas是按照小于720像素画出来的, 所以在720像 ...

  8. Android画图之抗锯齿 paint 和 Canvas 两种方式

    在画图的时候,图片如果旋转或缩放之后,总是会出现那些华丽的锯齿.其实Android自带了解决方式.    方法一:给Paint加上抗锯齿标志.然后将Paint对象作为参数传给canvas的绘制方法. ...

  9. canvas调用scale或者drawImage图片操作后，锯齿感很明显的解决

    <script type="text/javascript"> //解决canvas画画图片 var mengvalue = -1; var phoneWidth = ...

随机推荐

  1. 树链剖分【CF165D】Beard Graph

    Description 给定一棵树,有m次操作. 1 x 把第x条边染成黑色 2 x 把第x条边染成白色 3 x y 查询x~y之间的黑边数,存在白边输出-1 Input 第1行为一个整数\(n\), ...

  2. React 中组件的生命周期

    先上代码, react 用的是 15.0.1 <!DOCTYPE html> <html> <head> <script src="./build/ ...

  3. JZYZOJ1524 [haoi2012]外星人 欧拉函数

    http://172.20.6.3/Problem_Show.asp?id=1524 大概可以算一个结论吧,欧拉函数在迭代的时候,每次迭代之后消去一个2,每个非2的质因子迭代一次又(相当于)生成一个2 ...

  4. JZYZOJ1383 [usaco2003feb]impster 位运算 最短路

    http://172.20.6.3/Problem_Show.asp?id=1383  找能到达某个状态的最小操作数,然后把所有状态扫一遍即可,要额外判定一下起始就有的状态(如果起始里没有0那么这些状 ...

  5. AGC 018 A - Getting Difference

    题面在这里! 天呐,我已经做了一天水题了mmp 养生最重要,恩. 首先发现最终序列里的元素肯定是 <= max 的,因为无论何时序列里都不会有负数,所以减的话不会变大(反向大只有>2*ma ...

  6. [ARC103F]Distance Sums

    题意:有一棵树,对于每个点$i$,给出了它到其他点的距离和$i$,现在要还原这棵树,保证$d_i$两两不同 一个点从$u$移到相邻节点$v$时,若删掉$(u,v)$后$u$这边的连通块大小为$siz_ ...

  7. 【贪心】【后缀自动机】XIII Open Championship of Y.Kupala Grodno SU Grodno, Saturday, April 29, 2017 Problem E. Enter the Word

    题意:给你一个串,让你从左到右构造这个串,一次操作可以直接在当前串后面添加一个任意字符,或者拷贝当前串的任意一个子串到当前串的后面.问你最少要多少次操作才能构造出这个串. 从前向后贪心,从当前已构造的 ...

  8. 【强连通分量缩点】【拓扑排序】【dp预处理】CDOJ1640 花自飘零水自流，一种相思，两处闲愁。

    题意: 在n个点m条边的有向图上,从1出发的回路最多经过多少个不同的点 可以在一条边上逆行一次 题解: 在同一个强连通分量中,显然可以经过当中的每一个点 因此先将强连通分量缩点,点权为强连通分量的点数 ...

  9. 【可持久化数组】【rope】bzoj3673 bzoj3674 可持久化并查集 by zky

    rope教程:http://blog.csdn.net/iamzky/article/details/38348653 Code(bzoj3673): #include<cstdio> # ...

  10. bootstrap中日历组件只显示年月

    大多数情况下日历组件我们使用的都是yyyy-mm-dd的日历格式,但是有时候需求不需要我们精确到日,而是最小单位到月份(yyyy-mm),网上找了很多方法,但是都没有我想要的效果,一些属性的设置都没有 ...