<!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. Poj2182 Lost Cows（玄学算法）

    题面 Poj 题解 不难发现最后一位就是\(pre[n]+1\),然后消除这个位置对其他位置的贡献,从左到右扫一遍,必定有至少一个位置可以得出,循环这个过程,\(O(n^2)\)出解. #includ ...

  2. 算法练习（js）

    1. 问题:Spinal Tap Case 将字符串转换为 spinal case.Spinal case 是 all-lowercase-words-joined-by-dashes 这种形式的,也 ...

  3. CXF浅析

    CXF 框架支撑环境    CXF 框架是一种基于 Servlet 技术的 SOA 应用开发框架,要正常运行基于 CXF 应用框架开发的企业应用,除了 CXF 框架本身之外,还需要 JDK 和 Ser ...

  4. [NOIP2016]天天爱跑步(树上差分+线段树合并)

    将每个人跑步的路径拆分成x->lca,lca->y两条路径分别考虑: 对于在点i的观察点,这个人(s->t)能被观察到的充要条件为: 1.直向上的路径:w[i]=dep[s]-dep ...

  5. 【暴力】hdu6121 Build a tree

    给你n,K,让你构造出一颗n个结点的完全K叉树,求所有结点子树大小的异或和. 先把n号结点到根的路径提取出来单独计算.然后这条路径把每一层分成了左右两部分,每一层的左侧和其上一层的右侧的结点的子树大小 ...

  6. Problem F: 零起点学算法42——多组测试数据输出II

    #include<stdio.h> int main() { ; while(scanf("%d%d%d",&a,&b,&c)!=EOF) { ...

  7. javacript总结

    前端js总结 //getElementById函数 function $(id){ return document.getElementById(id); } //随机函数不包max //Math.f ...

  8. Word中将图表变为表格

    一定要先拷贝了图表,否则第二张图片没那个像是,只有最后一个,这样的做的目的是减少查重. 还有就是把部分文字放入Mathtype,查不出来.

  9. [Android Pro] 关于BitmapFactory.decodeStream(is)方法无法正常解码为Bitmap对象的解决方法

    在android sdk 1.6版本API帮助文档中,其中关于BitmapFactory.decodeFactory.decodeStream(InputStream is)的帮助文档是这么说明的: ...

  10. ylbtech-LanguageSamples-OLEDB

    ylbtech-Microsoft-CSharpSamples:ylbtech-LanguageSamples-OLEDB 1.A,示例(Sample) 返回顶部 “OLE DB”示例 本示例演示了如 ...