圆角锯齿

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>锯齿</title>
        <script type="text/javascript">
        window.addEventListener("load", eventWindowLoaded, false);
        function eventWindowLoaded(){
            var x,y;
            var theCanvas = document.getElementById("canvas");
            var context = theCanvas.getContext("2d");
            context.strokeStyle = ‘#CB9A61‘;
            context.lineWidth=10;
            context.strokeRect(10,  10, theCanvas.width-20, theCanvas.height-20);
            context.fillStyle = "#FFFFFF";
            for(x=5;x<=canvas.width;x=x+10){
                context.beginPath();
                context.arc(x,5,5,0,Math.PI*2,true);
                context.arc(x,canvas.height-5,5,0,Math.PI*2,true);
                context.closePath();
                context.fill();
            }
            for(y=5;y<=canvas.height;y=y+10){
                context.beginPath();
                context.arc(5,y,5,0,Math.PI*2,true);
                context.arc(canvas.width-5,y,5,0,Math.PI*2,true);
                context.closePath();
                context.fill();
            }
        }
        </script>
    </head>
<body>
    <div style="position: absolute; top: 100px; left: 100px;">
    <canvas id="canvas" width="400" height="170" top=50px; left=50px;>
    </div>
</body>
</html>

时间： 2024-11-08 19:36:18

圆角锯齿的相关文章

Android圆角图片和圆形图片实现总结

1. 概述 Android研发中经常会遇见圆角或者圆形图片的展示,但是系统中ImageView并不能直接支持,需要我们自己做一些处理,来实现圆角图片或者圆形图片,自己最近对这块的实现做了一下总结,看一下几种实现方法. 图层叠加,上层覆盖一层蒙版,遮挡图片,让图片展示出圆角或者圆形效果重新绘制 BitmapShader Xfermode RoundedBitmapDrawable CardView,使用官方控件,自动裁剪,达到圆角或者圆形效果.(5.0以上系统) 第一种方法,很傻,不太优雅,不推

一起学android之设置资源图片为圆角图片（28）

效果图: 参看以下代码: public class MainActivity extends Activity { private ImageView imageView1; private ImageView imageView2; Bitmap mBitmap; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.

第4章背景图像效果之圆角框

一圆角框 1 固定宽度的圆角框 <style> .box{ width: 418px; background: #effce7 url(img/bottom.gif) no-repeat left bottom;} .box h2{ background: url(img/top.gif) no-repeat left top; padding: 20px 20px 0px 20px ;} .box p{ padding: 0 20px 20px 20px;} </style>

圆角和圆形ImageView

※效果 ※代码 /** * 转换图片成圆形 * * @param bitmap * 传入Bitmap对象 * @return */ public Bitmap toRoundBitmap(Bitmap bitmap) { int width = bitmap.getWidth(); int height = bitmap.getHeight(); float roundPx; float left, top, right, bottom, dst_left, dst_top, dst_right

95秀-PK 动画进度条描边圆角图片

PK界面 <?xml version="1.0" encoding="utf-8"?> <merge xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <Rela

Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)

1.首先说一下canvas类: Class OverviewThe Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into the bitmap), a drawing primitive (e.g. Rect, Path,

Qt 之设置窗口边框的圆角（使用QSS和PaintEvent两种方法）

Qt在设置窗口边框圆角时有两种方式,一种是设置样式,另一种是在paintEvent事件中绘制窗口.下面分别叙述用这两种方式来实现窗口边框圆角的效果. 一.使用setStyleSheet方法 this->setStyleSheet(“QWidget{border-top-left-radius:15px;border-top-right-radius:5px;}”)); 使用的主要是使用border-radius 属性,关于这个属性,可选的样式有 border-top-left-radius 设置

图片圆角效果

public static Bitmap getRoundCornerImage(Bitmap bitmap, int roundPixels) { //创建一个和原始图片一样大小位图 Bitmap roundConcerImage = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Config.ARGB_8888); //创建带有位图roundConcerImage的画布 Canvas canvas = new Canva

11.2 固定宽度圆角框

因为不必考虑宽度变化带来的麻烦,所以制作宽度固定的圆角框比制作适应宽度的圆角框要简单很多.关键在于如何合理地使用背景图像. 一.两背景图像法本例制作如图1所示的圆角框,使用两个背景图像文件,宽度固定.这种方法只适用于制作单色圆角框.本实例文件位于网页学习网CSS教程资源中“第11章\01\basic.htm”. 图1 圆角框案例效果 ① 使用这种方法首先要确定圆角框的颜色,以及圆角框后面的网页背景的颜色,然后根据这两种颜色制作两个图像文件,如图2所示.例如,这里的网页背景为白色,圆角框为咖啡色