matlab 黑白同心圆环,Canvas如何绘制同心圆环

没时间解释了，看下面的代码

Document

.img{

position: fixed;

left: 0;

top: 0;

}

window.onload = function () {

var canvas = document.createElement("canvas");

document.body.appendChild(canvas);

canvas.setAttribute("class", "img");

canvas.setAttribute("width", "300px");

canvas.setAttribute("height", "300px");

draw(0.3, 125, 100, 2.8, 4.2, 5);

canvas = document.createElement("canvas");

document.body.appendChild(canvas);

canvas.setAttribute("class", "img");

canvas.setAttribute("width", "300px");

canvas.setAttribute("height", "300px");

draw(0.4, 125, 150, 0.6, 1.4, 5);

canvas = document.createElement("canvas");

document.body.appendChild(canvas);

canvas.setAttribute("class", "img");

canvas.setAttribute("width", "300px");

canvas.setAttribute("height", "300px");

draw(0.6, 125, 200, 0.8, 2.1, 5);

function draw(alpha, frame, radius, start, end, line) {

var context = canvas.getContext("2d");

context.beginPath();

context.strokeStyle = "#2BA3ED";

context.lineCap = "square";

context.globalAlpha = alpha;

context.closePath();

context.fill();

context.lineWidth = line;

context.putImageData(context.getImageData(0, 0, radius, radius), 0, 0);

context.beginPath();

context.arc(frame, frame, radius / 2, start, end * Math.PI, false);

context.stroke();

}

matlab 黑白同心圆环,Canvas如何绘制同心圆环相关推荐

html5 canvas 圆圈,使用HTML5 Canvas arc()绘制圆形/圆环
前段时间的一个项目做到这个玩意,研究了一下绘制圆环的方法.最终使用HTML5的画布标签来做.arc()是HTML5 Canvas的一个API函数,作用是"创建弧/曲线(用于创建圆形或部分圆) ...
uniapp canvas绘制弧形圆环
项目uniapp 绘制弧形圆环首先说下:uniapp 插件市场有一个弧形进度条,作为组件引用的话是不兼容小程序,所以我做的是直接在本页面中进行绘制,刚开始也是作为组件进行引入的,但是小程序不兼容,无 ...
vue.js 利用canvas绘制仪表盘圆环进度条-带动画
vue.js 利用canvas绘制简易仪表盘进度条 html代码因为动画效果比较消耗性能,所以进度条单独canvas绘制 <template><div class="ci ...
java如何画百分比圆环_canvas绘制百分比圆环进度条
开发项目,PM会跟踪项目进度:完成某个事情,也可以设置一个完成的进度. 这里用canvas绘制一个简单百分比圆环进度条. 看下效果: 1. 动画方式 2. 静默方式贴上代码,仅供参考 /** * L ...
自定义View学习篇之绘制一个圆环动画
前言我们都知道,现实生活中画一幅画需要笔和纸,另外还需要各式各样的绘画技巧,那么同样的自定义view也需要这些.正好Android也给我们提供了这两样东西:Paint和Canvas,一个是画笔而另一 ...
H5画布绘制透明圆环
H5画布绘制透明圆环 <!DOCTYPE html> <html><head><meta charset="UTF-8"><t ...
MATLAB 8乘8西洋跳棋棋盘绘制
MATLAB 8乘8西洋跳棋棋盘绘制画一个黑白相间的棋盘: 可以先用白色作为底色, clc clear axis equal off %隐藏坐标轴 hold on %保持当前绘画窗口 fill([0 ...
Android进阶——自定义View之自己绘制彩虹圆环调色板
引言前面几篇文章都是关于通过继承系统View和组合现有View来实现自定义View的,刚好由于项目需要实现一个滑动切换LED彩灯颜色的功能,所以需要一个类似调色板的功能,随着手在调色板有效区域滑动, ...
用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

matlab 黑白同心圆环,Canvas如何绘制同心圆环

matlab 黑白同心圆环,Canvas如何绘制同心圆环相关推荐

最新文章

热门文章