制作径向渐变时 context.createRadialGradient(x , y , r , x1 , y1 , r1) 括号内参数含义如下:
x: 渐变的开始圆的 x 坐标
y: 渐变的开始圆的 y 坐标
r: 开始圆的半径
x1: 渐变的结束圆的 x 坐标
y1: 渐变的结束圆的 y 坐标
r1: 结束圆的半径
(x, y, r) (x1,y1,r1)分别可以代表一个圆形的特征, 个人感觉通常情况下(x,y) 和 (x1,y1)简单地相同即可(即同心圆), 这样做出来的径向渐变已经十分美观,符合大众审美观。
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 创建径向渐变
var grd=ctx.createRadialGradient(150,150,5,150,150,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(50,50,250,250);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d"); // 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(0.5,"green");
grd.addColorStop(1,"white"); // 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
window.onload = function(){
var can = document.getElementById('myCanvas');
var pro = can.innerHTML.substring(0,can.innerHTML.length-1);
console.log(pro);
var cxt = can.getContext('2d');
}
carl
247***6494@qq.com
在画圆的时候,使用下面的方法
画布的左上角坐标为0,0
注意:Math.PI表示180°,画圆的方向是顺时针
尝试一下 »carl
247***6494@qq.com
yuanchaowhut
yua***aowhut@126.com
参考地址
制作径向渐变时 context.createRadialGradient(x , y , r , x1 , y1 , r1) 括号内参数含义如下:
(x, y, r) (x1,y1,r1)分别可以代表一个圆形的特征, 个人感觉通常情况下(x,y) 和 (x1,y1)简单地相同即可(即同心圆), 这样做出来的径向渐变已经十分美观,符合大众审美观。
尝试一下 »
yuanchaowhut
yua***aowhut@126.com
参考地址
jiao
735***921@qq.com
创建线性渐变时 context.createLinearGradient(x,y,x1,y1) 括号内的参数含义如下:
尝试一下 »
jiao
735***921@qq.com
codeJun
460***593@qq.com
关于画布的滚动条实现代码:
尝试一下 »
codeJun
460***593@qq.com
smlz
540***690@qq.com
参考了一楼的笔记,可以做出上半圆。左半圆和有半圆也是同理的。
尝试一下 »
smlz
540***690@qq.com
Infinity
114***1435@qq.com
创建渐变时 context.addColorStop(stop, color) 括号内参数含义如下:
在绘制渐变时,可以通过多个 addColorStop() 方法来定义渐变;否则渐变将不可见。
Infinity
114***1435@qq.com
FK
429***967@qq.com
Canvas 转为图片
我们可以使用 Canvas2image 库将 canvas 转换为图片。
本地下载:http://static.runoob.com/assets/canvas2image/canvas2image.js。
Github 地址:https://github.com/hongru/canvas2image
使用方式如下:
测试实例:
尝试一下 »
FK
429***967@qq.com
鹏程万里
206***0864@qq.com
自己制作的钟表,觉得还不错,分享一下!
https://c.runoob.com/codedemo/5613
鹏程万里
206***0864@qq.com