我在HTML 5画布中创建了一个弧,当前使用单独的HTML元素将内部阴影覆盖在它上面。我不想将这个内部阴影作为单独的元素并应用CSS box-shadow
,而是使用javascript将完全相同的阴影应用于画布中的弧。
换句话说,我想将以下内容转换为javascript:
box-shadow: inset 0px 3px 5px 0px rgba(5, 71, 110, 0.51), inset 0px 0px 19px 0px rgba(0, 0, 0, 0.6);
此JSFiddle显示了我目前拥有的内容,或者看到以下代码段:
$(document).ready(function(){
// Convert degrees to radians
function convertToRadians(degrees){
return degrees * (Math.PI/180);
}
// Create map to convert percentage to radians
function map(value, minIn, maxIn, minOut, maxOut){
return (value - minIn) * (maxOut - minOut) / (maxIn - minIn) + minOut;
}
// Get the canvas
var canvas = document.getElementById('progress');
var context = canvas.getContext('2d');
// Set the size of the ring
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var sections = 6;
var radius = 94;
// Begin the circle
context.beginPath();
context.arc(centerX, centerY, radius, convertToRadians(90), convertToRadians(map(100, 0, 100, 90, 450)), false);
// Create the gradient
var gradient = context.createLinearGradient(canvas.width, 0, 0, canvas.height);
gradient.addColorStop(0, '#D95FF6');
gradient.addColorStop(0.3, '#D95FF6');
gradient.addColorStop(0.7, '#4512CB');
gradient.addColorStop(1, '#4512CB');
// Set the stroke
context.lineWidth = 22;
context.strokeStyle = gradient;
context.stroke();
});

html, body {
background: #f5f5f5;
}
#progress_shadow {
position: absolute;
border-radius: 50%;
width: 212px;
height: 212px;
margin: 14px;
-webkit-box-shadow: inset 0px 3px 5px 0px rgba(5, 71, 110, 0.51), inset 0px 0px 19px 0px rgba(0, 0, 0, 0.6);
-moz-box-shadow: inset 0px 3px 5px 0px rgba(5, 71, 110, 0.51), inset 0px 0px 19px 0px rgba(0, 0, 0, 0.6);
box-shadow: inset 0px 3px 5px 0px rgba(5, 71, 110, 0.51), inset 0px 0px 19px 0px rgba(0, 0, 0, 0.6);
z-index: 8;
}
#progress {
position: absolute;
margin: 8px;
z-index: 7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="progress_shadow"></div>
<canvas id="progress" width="224" height="224"></canvas>
&#13;
答案 0 :(得分:4)
你也可以在Canvas中使用阴影,但要获得一个插入阴影,你还必须使用剪切,这会导致阴影的“外部”被剪掉。
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var PI=Math.PI;
var PI2=PI*2;
var startColor='#DD3002';
var endColor='#FF9966';
var centerX=150;
var centerY=150;
var radius=115;
var sections=6;
drawGradient(centerX,centerY,radius-13,sections);
drawShadow(centerX,centerY,radius);
function drawShadow(cx,cy,r){
ctx.save();
ctx.strokeStyle='white';
ctx.lineWidth=2;
ctx.shadowColor='black';
ctx.shadowBlur=18;
//
ctx.beginPath();
ctx.arc(cx,cy,r,0,PI2);
ctx.clip();
ctx.stroke();
ctx.stroke();
//
ctx.shadowColor='rgba(5,71,110,.50)';
ctx.shadowBlur=4;
ctx.shadowOffsetY=3;
ctx.stroke();
ctx.stroke();
//
ctx.restore();
}
function drawGradient(centerX,centerY,radius,sections){
ctx.beginPath();
ctx.arc(centerX, centerY, radius, convertToRadians(90), convertToRadians(map(100, 0, 100, 90, 450)), false);
// Create the gradient
var gradient = ctx.createLinearGradient(canvas.width, 0, 0, canvas.height);
gradient.addColorStop(0, '#D95FF6');
gradient.addColorStop(0.3, '#D95FF6');
gradient.addColorStop(0.7, '#4512CB');
gradient.addColorStop(1, '#4512CB');
// Set the stroke
ctx.lineWidth = 22;
ctx.strokeStyle = gradient;
ctx.stroke();
}
function convertToRadians(degrees){
return degrees * (Math.PI/180);
}
function map(value, minIn, maxIn, minOut, maxOut){
return (value - minIn) * (maxOut - minOut) / (maxIn - minIn) + minOut;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width=300 height=300></canvas>