<!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. Codeforces Round #116 (Div. 2, ACM-ICPC Rules) Letter（DP 枚举）

    Letter time limit per test 1 second memory limit per test 256 megabytes input standard input output ...

  2. 实验三 敏捷开发与XP实践实验报告

    实验三 敏捷开发与XP实践实验报告 实验内容 1. XP基础 2. XP核心实践 3. 相关工具 实验要求 1.没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vi ...

  3. [JSOI2018]军训列队

    [JSOI2018]军训列队 题目大意: \(n(n\le5\times10^5)\)个学生排成一排,第\(i\)个学生的位置为\(a_i\).\(m(m\le5\times10^5)\)次命令,每次 ...

  4. Activity(活动)生命周期（2）--活动状态

    每个活动在其生命周期中最多会有4种状态 一.运行状态 当一个活动位于返回栈的栈顶的时候,这时活动就处于运行状态.系统一般不会回收,因为这会带来非常差的用户体验 二.暂停状态 当一个活动不处于栈顶状态的 ...

  5. Java字节码文件结构---概述

    一.Class文件的结构概述: 是一连串的字节流(以自节为基本单位划分),里面包含的数据项按照固定的次序依次排列组成Class文件,文件内部不含分割符 当数据项的长度大于1B时候,按照高位在前的方式存 ...

  6. [Bug]Object reference not set to an instance of an object.

    引言 今天在客户这儿,由一个问题导致,需求的变化,不得不修改代码,在记录日志中出现该问题. 原因 通过id查找相关信息,没有判断是否为null,集合是否有数据. Object reference no ...

  7. 乐观锁悲观锁对应的JAVA代码和数据库

    乐观锁悲观锁是一种思想.可以用在很多方面. 比如数据库方面.悲观锁就是for update乐观锁就是 version字段 JDK方面:悲观锁就是sync乐观锁就是原子类(内部使用CAS实现) 本质来说 ...

  8. mac -- 安装OpenCV

    brew install opencv #这个装的是3.4 brew unlink opencv # 取消关联 brew install opencv@2  # 安装2.X的版本

  9. linux环境php将word转换成pdf

    原文地址:http://www.niu12.com/article/15 ubuntu.java环境.openoffice.jodConverter.php 1.安装java环境 a. jdk下载(我 ...

  10. 对象的当前状态使该操作无效 说明: 执行当前 Web 请求期间，出现未处理的异常。

    这个异常在页面数据量小的时候并不会触发,只在页面数据量大的情况下才会出现, 异常信息如下: 对象的当前状态使该操作无效.  说明: 执行当前 Web 请求期间,出现未处理的异常.请检查堆栈跟踪信息,以 ...