canvas锯齿

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script type="text/javascript">
 7             function draw(id){
 8                 var canvas = document.getElementById(id);
 9                 if(canvas == null){
10                     return false;
11                 }
12                 var context = canvas.getContext(‘2d‘);
13                 context.fillStyle = ‘#eeeeff‘;
14                 context.fillRect(0,0,400,300);
15                 var dx = 150;
16                 var dy = 150;
17                 var s =100;
18                 context.beginPath();
19                 context.fillStyle = ‘rgb(255,0,0)‘;
20                 context.strokeStyle = ‘rgb(0,0,0)‘;
21                 var x = Math.sin(0);
22                 var y = Math.cos(0);
23                 var dig = Math.PI/15*11;
24                 for(var i=0;i<30;i++){
25                     var x = Math.sin(i*dig);
26                     var y = Math.cos(i*dig);
27                     context.lineTo(dx+x*s,dy+y*s);
28                 }
29                 context.closePath();
30                 context.fill();
31                 context.stroke();
32             }
33         </script>
34     </head>
35     <body onload="draw(‘canvas‘);">
36         <canvas id="canvas" width="400" height="300"></canvas>
37     </body>
38 </html>
时间: 2024-10-21 20:56:58

canvas锯齿的相关文章

Canvas处理头像上传

未分类 最近社区系统需要支持移动端,其中涉及到用户头像上传,头像有大中小三种尺寸,在PC端,社区用Flash来处理头像编辑和生成,但该Flash控件的界面不友好而且移动端对Flash的支持不好,考虑到这些问题,最后我们选用Canvas来完成图像尺寸缩放和图片数据获取. 等边处理 头像一般都是正方形,首先我们需要获取图片宽度和高度的最小值,用该最小值作为边长居中裁剪图片,最终得到一个正方形的图片: var ImageEditor = function() { // 用离线canvas处理图片数据

移动端canvas抗锯齿

未抗锯齿效果图: 加入抗锯齿代码效果: var Game = function(){ var H = document.documentElement.clientHeight || document.body.clientHeight; var W = document.documentElement.clientWidth || document.body.clientWidth; this.canvas = document.getElementById("canvas"); t

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

当绘制1像素的线条时,发现多条线明显存在着粗细不均的问题,线条带有明显的锯齿. 事实上,Canvas的绘制线条指令都存在这个状况,如lineTo,arcTo,strokeRect. 解决方案是将Canvas平移半个像素即可: var ctx = document.getElementById("canvas").getContext("2d"); ctx.translate(0.5, 0.5); 这意味着,在绘制线条时,如果Canvas上下文中对应的坐标值为整数,那

canvas画圆类似于锯齿指针 angular5

拿到图的时候大致是这样的,里面的圆是有动态效果的,考虑到gif图耗资源,于是想要用canvas画出来: 仔细看图不难发现,这个锯齿圆类似于表盘,计算好弧度,不难实现: 因为项目现在用的框架是angular5,所以获取元素时,要用到ElementRef;直接引用就好: 先来看下页面: import {Component, OnInit, ElementRef, ViewChild, OnDestroy} from "@angular/core";export class LoginCom

关于如何解决canvas的画圆弧时的锯齿感以及如何让canvas的图更清晰?

let width = canvas.width,height=canvas.height;if (window.devicePixelRatio) {   canvas.style.width = width + "px";   canvas.style.height = height + "px";   canvas.height = height * window.devicePixelRatio;   canvas.width = width * windo

Canvas类介绍:

在安卓中把canvas当成是一块画布,我们可以再画布上画我们想要的内容,当然除了在画布上绘制之外,还需要设置一些关于画布的属性,比如:颜色.尺寸等等.下面我们来分析一下Android中的canvas有哪些功能. Canvas():创建一个空的画布,可以使用setBitmap()方法来是设置绘制的具体画布: Canvas(Bitmap bitmap):以bitmap对象创建一个空的画布,则将内容那个绘制到bitmap上,因此bitmap不能为null: Canvas(GL gl):在绘制3D效果时

Android利用canvas画各种图形

canvas通俗的说就是一张画布,我们可以使用画笔paint,在其上面画任意的图形. 原理: 可以把canvas视为Surface的替身或者接口,图形便是绘制在Surface上的.Canvas封装了所有的绘制调用.通过Canvas, 绘制到Surface上的内容首先存储到一个内存区域(也就是对应的Bitmapz中),该Bitmap最终会呈现到窗口上. 使用: 1.Canvas可以直接new Canvas(): 2.在View中重写OnDraw()方法,里面有一个Canvas,今天讨论的内容. 方

安卓用canvas画曲线图

1.新建一个常变量类Constant.java package com.rain.db; import android.graphics.Point; public class Constant { public static Point point;//获取屏幕的大小 } 2.新建一个函数ChartView.java 1 package com.rain.kongjian; 2 3 import com.rain.db.Constant; 4 5 import android.content.

用Canvas制作简单的画图工具

今天用Canvas制作了一个画图工具,非常简单,功能也不是很多,主要有背景网格,画线,画圆,画矩形和画圆角矩形,也用到了canvas的一些基本知识,在这里一一列举. 1.线段的绘制: 如何绘制真正的1像素的线段? 如果在像素边界处绘制一条1像素宽的垂直线段,那么canvas的绘图环境对象会试着将半个像素画在边界中线的右边,将另外半个像素画在边界中线的左边.然而,在一个整像素的范围内绘制半个像素宽的线段是不可能的,,所以左右两个方向上的半像素都被扩展为1像素.如图所示 本来我们想要将线段绘制在深灰