带3D效果边框的画布矩形 [英] Canvas rectangle with 3D effect border

问题描述

由于我无法在此处附加任何文件，请按照我的说明解决我的问题。

1.打开您的Gmail帐户

2.请选择''发送反馈''在设置菜单下

3.突出显示使用它的任何区域



突出显示的部分是带有凸起边框的div，可以产生3D效果。

我试图创建这样的东西，但是使用HTML5 canvas元素.Canvas方法允许我们创建这样的矩形，但有没有办法为我的画布矩形提供这样的凸起边框3D效果？ div class =h2_lin>解决方案

如果这真的需要HTML5画布，你需要它来绘制一些线条：

http://www.tutorialspoint.com/html5/canvas_drawing_lines.htm [ ^ ]。



这样的框架只不过是4个直线段（最差的是8个），有几种不同的颜色，如白色和灰色。

-SA

 context.rect（ 50 ， 50 ， 100 ， 100 ）; 
 context.fillStyle = '  white'; 
 context.shadowColor = '  black'; 
 context.shadowBlur =  25 ; 
 context.shadowOffsetX =  10 ; 
 context.shadowOffsetY =  10 ; 
 context.fill（）; 

As i cannot attach any file here please follow my instructions to get to my issue.
1. Open your gmail account
2. Please select ''send feedback'' under settings menu
3. Highlight any area using it

The highlighted section are div with raised border which gives it a 3D effect.
I am trying to create something like this but using HTML5 canvas element.Canvas methods allow us to create such rectangles but is there any way to provide such raised border 3D effect to my canvas rectangle??

解决方案

If this really needs to be HTML5 canvas, all you need it to draw some lines:
http://www.tutorialspoint.com/html5/canvas_drawing_lines.htm[^].

Such frame is nothing but 4 straight line segments (at worst, 8) of a couple of different shades of color, like white and gray.

—SA

context.rect(50, 50, 100, 100);
context.fillStyle = 'white';
context.shadowColor = 'black';
context.shadowBlur = 25;
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.fill();

这篇关于带3D效果边框的画布矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！