<!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. 使用appframework前端框架中输入框圆角问题

    目前使用HTML5技术来开发手机跨平台app已经成为了曾经的web开发人员介入移动开发的一条捷径.与此对应也出现了很多新的技术来支撑这样的开发方式,例如国外的phonegap和国内的APPcan等.很 ...

  2. Python生成随机数的一些函数

    头文件: import random 1.生成一个随机浮点数,范围是0-1: print random.random() 2.生成指定范围内的随机浮点数: print random.uniform(a ...

  3. [CF1063F]String Journey

    题意:定义长度为$k$的journey为一个字符串序列$t_{1\cdots k}$,对$\forall i\gt1$满足$t_i$是$t_{i-1}$的严格子串,定义字符串$s$上的journey为 ...

  4. 【计算几何】【bitset】Gym - 101412G - Let There Be Light

    三维空间中有一些(<=2000)气球,一些光源(<=15),给定一个目标点,问你在移除不超过K个气球的前提下,目标点所能接受到的最大光照. 枚举每个光源,预处理其若要照射到光源,需要移走哪 ...

  5. 【状压dp】CDOJ1608 暑假集训

    裸的状压的话,很显然……但有一个强大的优化. 就是在枚举决策的时候,固定第一个空位置.可以证明,这样状态数没有减少,但是降低了很多重复访问. 因为你在枚举的时候,总是可以划分为包含第一个空位置的3个位 ...

  6. 【带权并查集】poj1182 食物链

    带权并查集,或者叫做种类并查集,经典题. http://blog.csdn.net/shuangde800/article/details/7974668 这份代码感觉是坠吼的. 我的代码是暴力分类讨 ...

  7. Problem C: 指针：有n个整数，使其前面各数顺序向后移m个位置，最后m个数变成最前面m个数

    #include<stdio.h> int move(int *x,int n,int m) { ]; int i; //int *p;指针循环变量p ;i<n;i++) t[i]= ...

  8. Java高级架构师（一）第35节：Nginx的Location区段

    没有修饰符 表示:必须以指定模式开始. 表示/abc下的所有内容都可以被访问. = 表示与指定的模式精确匹配,可以带参数. 实例中要求区分大小写,并以c结尾. 实例中指定的正则表达式不区分大小写. 注 ...

  9. Smart config风险分析与对策

    Smart config风险分析与对策 1.简介:          Smart config是一种将未联网设备快速连接wifi的技术,大概原理如下图所示: 2.业务需求:          要求实现 ...

  10. python实现多播数据的发送和接收

    在项目中,YS私有协议用到多播技术,在验证其安全特性时用到python去发送多播包,在此做个记录. 多播服务器用于向多播组发送多播数据包,其实现代码如下: #coding:utf-, import s ...