H5画布绘制透明圆环

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>透明圆环</title><style>#myCanvas {box-shadow: 0 0 5px black;margin-top: 50px;margin-left: 50px;}</style></head><body><canvas id="myCanvas" width="500px" height="500px"></canvas></body><script>var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");ctx.fillStyle = "orange";ctx.fillRect(0, 0, 250, 250);ctx.fillStyle = "#ADFE2F";ctx.fillRect(250, 0, 250, 250);ctx.fillStyle = "red";ctx.fillRect(0, 250, 250, 250);ctx.fillStyle = "skyblue";ctx.fillRect(250, 250, 250, 250);ctx.fillStyle = "white";ctx.globalAlpha = 0.2;//绘制10个透明圆环for(var i=0;i<10;i++) {ctx.beginPath();ctx.arc(250, 250, 25 + 25*i, 0, Math.PI*2, false);ctx.fill();}</script>
</html>

H5画布绘制透明圆环相关推荐

H5画布 canvas（一）canvas简介、绘制圆形矩形、案例饼状图绘制
目录 1. canvas 简介 2. canvas 标签介绍 3. canvas 上下文 Context 4. 案例:在 canvas 画布中绘制表格 5. canvas 的 beginPath 状态 ...
H5画布 canvas（一）canvas简介、绘制圆形/矩形、案例饼状图绘制
目录 1. canvas 简介 2. canvas 标签介绍 3. canvas 上下文 Context 4. 案例:在 canvas 画布中绘制表格 5. canvas 的 beginPath 状态 ...
编程示例：在H5画布上绘制毕达哥拉斯树
编程示例:在H5画布上绘制毕达哥拉斯树 --------------------------绘制毕达哥拉斯的树形图案 04-25 function draw_tree() { draw_squa ...
html5画分形图形,2.5 绘制透明图形 - HTML5 Canvas 实战
对于需要图形分层的应用,经常需要处理透明度.本节,我们将学习如何使用全局透明度设置图形的透明度. 图2-5 绘制透明图形绘制步骤按照以下步骤,在一个不透明的矩形之上,绘制一个透明的圆: 1. 定义 ...
《JavaScript高效图形编程（修订版）》——6.7 画布绘制基础
本节书摘来自异步社区<JavaScript高效图形编程(修订版)>一书中的第6章,第6.7节,作者:[美]Raffaele Cecco著,更多章节内容可以访问云栖社区"异步社区& ...
WebGL入门(三十九)-透明与不透明物体共存，绘制透明面和不透明面的立方体
绘制透明面和不透明面的立方体 1. 绘制透明立方体 1.1 绘制透明立方体要点 1.2 绘制透明立方体demo效果 1.3 绘制透明立方体demo代码 1.4 开启隐藏面消除后 2. 透明与不透明共存 ...
H5 Canvas绘制三角函数图像
三角函数sin.cos.tan.sinh.cosh.tanh js 的Math库,自带了许多常见函数方法,其中关于三角函数的求解还是很齐全的,于是想到,利用canvas 绘制一个比较准确的 sin. ...
h5画布动画_使用HTML5画布制作动画的漫画面板
h5画布动画 Continuing the comic theme I've been building over the past few weeks and inspired by the new ...
uniapp canvas绘制弧形圆环
项目uniapp 绘制弧形圆环首先说下:uniapp 插件市场有一个弧形进度条,作为组件引用的话是不兼容小程序,所以我做的是直接在本页面中进行绘制,刚开始也是作为组件进行引入的,但是小程序不兼容,无 ...

H5画布绘制透明圆环

H5画布绘制透明圆环

H5画布绘制透明圆环相关推荐

最新文章

热门文章