কেবল একপাশে স্লেন্টেড এজ দিয়ে আকৃতিটি তৈরি করার অনেকগুলি উপায় রয়েছে।
নিম্নলিখিত পদ্ধতিগুলি প্রশ্নটিতে ইতিমধ্যে উল্লিখিত হিসাবে গতিশীল আকারগুলি সমর্থন করতে পারে না:
- এর জন্য পিক্সেল মানগুলির সাথে সীমানা ত্রিভুজ পদ্ধতি
border-width
।
- কোণ সিনট্যাক্স সহ লিনিয়ার গ্রেডিয়েন্টস (যেমন 45deg, 30deg ইত্যাদি)।
গতিশীল আকারগুলি সমর্থন করতে পারে এমন পদ্ধতিগুলি নীচে বর্ণিত হয়েছে।
পদ্ধতি 1 - এসভিজি
( ব্রাউজার সামঞ্জস্য )
এসভিজিটি polygon
এস বা path
এস ব্যবহার করে আকার তৈরি করতে ব্যবহার করা যেতে পারে । নীচে স্নিপেট ব্যবহার করে polygon
। যে কোনও পাঠ্য সামগ্রী প্রয়োজনীয় আকারের উপরে অবস্থিত হতে পারে।
$(document).ready(function() {
$('#increasew-vector').on('click', function() {
$('.vector').css({
'width': '150px',
'height': '100px'
});
});
$('#increaseh-vector').on('click', function() {
$('.vector').css({
'width': '100px',
'height': '150px'
});
});
$('#increaseb-vector').on('click', function() {
$('.vector').css({
'width': '150px',
'height': '150px'
});
});
})
div {
float: left;
height: 100px;
width: 100px;
margin: 20px;
color: beige;
transition: all 1s;
}
.vector {
position: relative;
}
svg {
position: absolute;
margin: 10px;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 0;
}
polygon {
fill: tomato;
}
.vector > span {
position: absolute;
display: block;
padding: 10px;
z-index: 1;
}
.vector.top > span{
height: 50%;
width: 100%;
top: calc(40% + 5px);
left: 5px;
}
.vector.bottom > span{
height: 50%;
width: 100%;
top: 5px;
left: 5px;
}
.vector.left > span{
width: 50%;
height: 100%;
left: 50%;
top: 5px;
}
.vector.right > span{
width: 50%;
height: 100%;
left: 5px;
top: 5px;
}
body {
background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
polygon:hover, span:hover + svg > polygon{
fill: steelblue;
}
.btn-container {
position: absolute;
top: 0px;
right: 0px;
width: 150px;
}
button {
width: 150px;
margin-bottom: 10px;
}
.vector.left{
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vector bottom">
<span>Some content</span>
<svg viewBox="0 0 40 100" preserveAspectRatio="none">
<polygon points="0,0 40,0 40,100 0,60" />
</svg>
</div>
<div class="vector top">
<span>Some content</span>
<svg viewBox="0 0 40 100" preserveAspectRatio="none">
<polygon points="0,40 40,0 40,100 0,100" />
</svg>
</div>
<div class="vector left">
<span>Some content</span>
<svg viewBox="0 0 40 100" preserveAspectRatio="none">
<polygon points="0,0 40,0 40,100 20,100" />
</svg>
</div>
<div class="vector right">
<span>Some content</span>
<svg viewBox="0 0 40 100" preserveAspectRatio="none">
<polygon points="0,0 20,0 40,100 0,100" />
</svg>
</div>
<div class='btn-container'>
<button id="increasew-vector">Increase Width</button>
<button id="increaseh-vector">Increase Height</button>
<button id="increaseb-vector">Increase Both</button>
</div>
পেশাদাররা
- এসভিজি স্কেলযোগ্য গ্রাফিক্স উত্পাদন করতে ডিজাইন করা হয়েছে এবং সমস্ত মাত্রা পরিবর্তনের সাথে ভালভাবে কাজ করতে পারে।
- সর্বনিম্ন কোডিং ওভারহেড দিয়ে সীমানা এবং হোভার ইফেক্ট অর্জন করা যায়।
- চিত্র বা গ্রেডিয়েন্ট ব্যাকগ্রাউন্ডও আকৃতিটিতে সরবরাহ করা যেতে পারে।
কনস
- ব্রাউজার সমর্থন সম্ভবত একমাত্র নেহাত কারণ IE8- এসভিজি সমর্থন করে না তবে এটি রাফেল এবং ভিএমএলের মতো লাইব্রেরি ব্যবহার করে প্রশমিত করা যেতে পারে। তদুপরি, ব্রাউজার সমর্থন অন্য বিকল্পগুলির চেয়ে কোনওভাবেই খারাপ নয়।
পদ্ধতি 2 - গ্রেডিয়েন্ট পটভূমি
( ব্রাউজার সামঞ্জস্য )
লিনিয়ার গ্রেডিয়েন্টগুলি এখনও আকার তৈরি করতে ব্যবহার করা যেতে পারে তবে প্রশ্নের সাথে উল্লিখিত কোণগুলির সাথে নয়। আমাদের কোণ নির্দিষ্ট করার পরিবর্তে to [side] [side]
বাক্য গঠন ( ভ্যালসকে ধন্যবাদ ) ব্যবহার করতে হবে। পক্ষগুলি নির্দিষ্ট করা হলে গ্রেডিয়েন্ট কোণগুলি ধারকগুলির মাত্রার উপর ভিত্তি করে স্বয়ংক্রিয়ভাবে সামঞ্জস্য হয়।
$(document).ready(function() {
$('#increasew-gradient').on('click', function() {
$('.gradient').css({
'height': '100px',
'width': '150px'
});
});
$('#increaseh-gradient').on('click', function() {
$('.gradient').css({
'height': '150px',
'width': '100px'
});
});
$('#increaseb-gradient').on('click', function() {
$('.gradient').css({
'height': '150px',
'width': '150px'
});
});
})
div {
float: left;
height: 100px;
width: 100px;
margin: 10px 20px;
color: beige;
transition: all 1s;
}
.gradient{
position: relative;
}
.gradient.bottom {
background: linear-gradient(to top right, transparent 50%, tomato 50%) no-repeat, linear-gradient(to top right, transparent 0.1%, tomato 0.1%) no-repeat;
background-size: 100% 40%, 100% 60%;
background-position: 0% 100%, 0% 0%;
}
.gradient.top {
background: linear-gradient(to bottom right, transparent 50%, tomato 50%) no-repeat, linear-gradient(to bottom right, transparent 0.1%, tomato 0.1%) no-repeat;
background-size: 100% 40%, 100% 60%;
background-position: 0% 0%, 0% 100%;
}
.gradient.left {
background: linear-gradient(to top right, transparent 50%, tomato 50%) no-repeat, linear-gradient(to top right, transparent 0.1%, tomato 0.1%) no-repeat;
background-size: 40% 100%, 60% 100%;
background-position: 0% 0%, 100% 0%;
}
.gradient.right {
background: linear-gradient(to top left, transparent 50%, tomato 50%) no-repeat, linear-gradient(to top left, transparent 0.1%, tomato 0.1%) no-repeat;
background-size: 40% 100%, 60% 100%;
background-position: 100% 0%, 0% 0%;
}
.gradient span{
position: absolute;
}
.gradient.top span{
top: calc(40% + 5px);
left: 5px;
height: 50%;
}
.gradient.bottom span{
top: 5px;
left: 5px;
height: 50%;
}
.gradient.left span{
left: 40%;
top: 5px;
width: 50%;
}
.gradient.right span{
left: 5px;
top: 5px;
width: 50%;
}
body {
background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
.btn-container {
position: absolute;
top: 0px;
right: 0px;
width: 150px;
}
button {
width: 150px;
margin-bottom: 10px;
}
.gradient.left{
clear:both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gradient bottom"><span>Some content</span>
</div>
<div class="gradient top"><span>Some content</span>
</div>
<div class="gradient left"><span>Some content</span>
</div>
<div class="gradient right"><span>Some content</span>
</div>
<div class='btn-container'>
<button id="increasew-gradient">Increase Width</button>
<button id="increaseh-gradient">Increase Height</button>
<button id="increaseb-gradient">Increase Both</button>
</div>
পেশাদাররা
- ধারকটির মাত্রা গতিশীল হলেও আকারটি অর্জন ও বজায় রাখা যায়।
- গ্রেডিয়েন্ট রঙ পরিবর্তন করে হোভার এফেক্ট যুক্ত করা যেতে পারে।
কনস
- হোভার ইফেক্টটি ট্রিগার করা হবে এমনকি কার্সার আকারের বাইরে থাকলেও ধারকটির মধ্যে থাকে।
- সীমানা যুক্ত করার জন্য জটিল গ্রেডিয়েন্ট ম্যানিপুলেশনগুলির প্রয়োজন হবে।
- প্রস্থ (বা উচ্চতা) খুব বড় হয়ে গেলে গ্রেডিয়েন্টগুলি জেগড কোণগুলি উত্পাদন করার জন্য পরিচিত।
- চিত্রের ব্যাকগ্রাউন্ড আকারে ব্যবহার করা যাবে না।
পদ্ধতি 3 - স্কিউ রূপান্তর
( ব্রাউজার সামঞ্জস্য )
এই পদ্ধতিতে, একটি ছদ্ম-উপাদান যুক্ত করা হয়, স্কিউ করা হয় এবং এমনভাবে অবস্থিত করা হয় যেন দেখে মনে হয় যে কোনও প্রান্তটি স্লেন্টেড / কোণযুক্ত। ঘূর্ণন এক্স অক্ষ বরাবর হওয়া উচিত। transform-origin
তখন হেলে যাওয়া পাশ থেকে পাশ বিপরীত থাকা উচিত।
$(document).ready(function() {
$('#increasew-skew').on('click', function() {
$('.skew').css({
'height': '100px',
'width': '150px'
});
});
$('#increaseh-skew').on('click', function() {
$('.skew').css({
'height': '150px',
'width': '100px'
});
});
$('#increaseb-skew').on('click', function() {
$('.skew').css({
'height': '150px',
'width': '150px'
});
});
})
div {
float: left;
height: 100px;
width: 100px;
margin: 50px;
color: beige;
transition: all 1s;
}
.skew {
padding: 10px;
position: relative;
background: tomato;
}
.skew:after {
position: absolute;
content: '';
background: inherit;
z-index: -1;
}
.skew.bottom:after,
.skew.top:after {
width: 100%;
height: 60%;
}
.skew.left:after,
.skew.right:after {
height: 100%;
width: 60%;
}
.skew.bottom:after {
bottom: 0px;
left: 0px;
transform-origin: top left;
transform: skewY(22deg);
}
.skew.top:after {
top: 0px;
left: 0px;
transform-origin: top left;
transform: skewY(-22deg);
}
.skew.left:after {
top: 0px;
left: 0px;
transform-origin: bottom left;
transform: skewX(22deg);
}
.skew.right:after {
top: 0px;
right: 0px;
transform-origin: bottom right;
transform: skewX(-22deg);
}
.skew:hover {
background: steelblue;
}
body {
background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
.skew.bottom {
margin-top: 10px;
}
.skew.left {
clear: both;
}
.btn-container {
position: absolute;
top: 0px;
right: 0px;
width: 150px;
}
button {
width: 150px;
margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="skew bottom">Some content</div>
<div class="skew top">Some content</div>
<div class="skew left">Some content</div>
<div class="skew right">Some content</div>
<div class='btn-container'>
<button id="increasew-skew">Increase Width</button>
<button id="increaseh-skew">Increase Height</button>
<button id="increaseb-skew">Increase Both</button>
</div>
পেশাদাররা
- সীমানা দিয়েও আকৃতি অর্জন করা যায়।
- হোভার ইফেক্টটি আকারের মধ্যে সীমাবদ্ধ থাকবে।
কনস
- মাত্রা কারণ একটি উপাদান স্কিউ যখন আকৃতি জন্য আনুপাতিকভাবে বৃদ্ধি বজায় রাখতে প্রয়োজন তার যেমন Y- অক্ষ বৃদ্ধি পায় অফসেট
width
বেড়ে যায় এবং ভাইস বিপরীতভাবে (বৃদ্ধি চেষ্টা width
করার 200px
স্নিপেট মধ্যে)। আপনি এই সম্পর্কে আরও তথ্য পেতে পারেন এখানে ।
পদ্ধতি 4 - দৃষ্টিভঙ্গি রূপান্তর
( ব্রাউজার সামঞ্জস্য )
এই পদ্ধতিতে, প্রধান ধারকটি X বা Y অক্ষের সাথে কিছুটা দৃষ্টিকোণ দিয়ে ঘোরানো হয়। উপযুক্ত মানটি সেট transform-origin
করা কেবলমাত্র একদিকে স্লেটেড প্রান্ত তৈরি করবে।
যদি শীর্ষ বা নীচের দিকটি স্লিটেন্ট থাকে তবে আবর্তনটি Y অক্ষের সাথে হওয়া উচিত, অন্যথায় আবর্তনটি X অক্ষের সাথে হওয়া উচিত। transform-origin
তখন হেলে যাওয়া পাশ থেকে পাশ বিপরীত থাকা উচিত।
$(document).ready(function() {
$('#increasew-rotate').on('click', function() {
$('.rotate').css({
'height': '100px',
'width': '150px'
});
});
$('#increaseh-rotate').on('click', function() {
$('.rotate').css({
'height': '150px',
'width': '100px'
});
});
$('#increaseb-rotate').on('click', function() {
$('.rotate').css({
'height': '150px',
'width': '150px'
});
});
})
div {
float: left;
height: 100px;
width: 100px;
margin: 50px;
color: beige;
transition: all 1s;
}
.rotate {
position: relative;
width: 100px;
background: tomato;
}
.rotate.bottom {
transform-origin: top;
transform: perspective(10px) rotateY(-2deg);
}
.rotate.top {
transform-origin: bottom;
transform: perspective(10px) rotateY(-2deg);
}
.rotate.left {
transform-origin: right;
transform: perspective(10px) rotateX(-2deg);
}
.rotate.right {
transform-origin: left;
transform: perspective(10px) rotateX(-2deg);
}
.rotate span {
position: absolute;
display: block;
top: 0px;
right: 0px;
width: 50%;
height: 100%;
}
.rotate.bottom span {
padding: 10px;
transform-origin: top;
transform: perspective(10px) rotateY(2deg);
}
.rotate.top span {
padding: 20px;
transform-origin: bottom;
transform: perspective(20px) rotateY(2deg);
}
.rotate.left span {
padding: 10px;
transform-origin: right;
transform: perspective(10px) rotateX(2deg);
}
.rotate.right span {
padding: 0px 30px;
transform-origin: left;
transform: perspective(10px) rotateX(2deg);
}
.rotate:hover {
background: steelblue;
}
body {
background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
.rotate.left{
clear:both;
}
.btn-container {
position: absolute;
top: 0px;
right: 0px;
width: 150px;
}
button {
width: 150px;
margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rotate bottom"><span>Some content</span>
</div>
<div class="rotate top"><span>Some content</span>
</div>
<div class="rotate left"><span>Some content</span>
</div>
<div class="rotate right"><span>Some content</span>
</div>
<div class='btn-container'>
<button id="increasew-rotate">Increase Width</button>
<button id="increaseh-rotate">Increase Height</button>
<button id="increaseb-rotate">Increase Both</button>
</div>
পেশাদাররা
- সীমানা দিয়ে আকৃতি অর্জন করা যায়।
- আকার বজায় রাখার জন্য আকারগুলি আনুপাতিকভাবে বাড়ানো দরকার না।
কনস
- সামগ্রীগুলিও ঘোরানো হবে এবং সেহেতু সাধারণ দেখতে তাদের পাল্টাতে হবে।
- অবস্থানগুলি স্থিতিশীল না হলে পাঠ্য অবস্থানের অবস্থানটি ক্লান্তিকর হবে।
পদ্ধতি 5 - সিএসএস ক্লিপ পাথ
( ব্রাউজার সামঞ্জস্য )
এই পদ্ধতিতে, প্রধান ধারক একটি বহুভুজ ব্যবহার করে প্রয়োজনীয় আকারে ক্লিপ করা হয়। বহুভুজের পয়েন্টগুলি যেখানে স্লেডেন্ট প্রান্ত প্রয়োজন তার উপর নির্ভর করে সংশোধন করা উচিত।
$(document).ready(function() {
$('#increasew-clip').on('click', function() {
$('.clip-path').css({
'height': '100px',
'width': '150px'
});
});
$('#increaseh-clip').on('click', function() {
$('.clip-path').css({
'height': '150px',
'width': '100px'
});
});
$('#increaseb-clip').on('click', function() {
$('.clip-path').css({
'height': '150px',
'width': '150px'
});
});
})
.clip-path {
position: relative;
float: left;
margin: 20px;
height: 100px;
width: 100px;
background: tomato;
padding: 4px;
transition: all 1s;
}
.clip-path.bottom {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 60%);
}
.clip-path.top {
-webkit-clip-path: polygon(0% 40%, 100% 0%, 100% 100%, 0% 100%);
}
.clip-path.left {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 40% 100%);
}
.clip-path.right {
-webkit-clip-path: polygon(0% 0%, 60% 0%, 100% 100%, 0% 100%);
}
.clip-path .content {
position: absolute;
content: '';
height: calc(100% - 10px);
width: calc(100% - 8px);
background: bisque;
}
.clip-path.bottom .content {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 60%);
}
.clip-path.top .content {
-webkit-clip-path: polygon(0% 40%, 100% 0%, 100% 100%, 0% 100%);
}
.clip-path .content.img {
top: 6px;
background: url(http://lorempixel.com/250/250);
background-size: 100% 100%;
}
body {
background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
.clip-path.left {
clear: both;
}
.clip-path:hover {
background: gold;
}
.btn-container {
position: absolute;
top: 0px;
right: 0px;
margin: 20px;
width: 150px;
}
button {
width: 150px;
margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clip-path bottom">
<div class="content">abcd</div>
</div>
<div class="clip-path top">
<div class="content img"></div>
</div>
<div class="clip-path left"></div>
<div class="clip-path right"></div>
<div class='btn-container'>
<button id="increasew-clip">Increase Width</button>
<button id="increaseh-clip">Increase Height</button>
<button id="increaseb-clip">Increase Both</button>
</div>
পেশাদাররা
- ধারকটিকে পরিবর্তনশীলভাবে পুনরায় আকার দেওয়া হলেও আকারটি বজায় রাখা যায়।
- হোভার ইফেক্টটি আকারের সীমানার মধ্যে পুরোপুরি সীমাবদ্ধ থাকবে।
- চিত্রটি আকারের পটভূমি হিসাবেও ব্যবহার করা যেতে পারে।
কনস
- ব্রাউজার সমর্থন বর্তমানে খুব খারাপ।
- সীমানাগুলি আকৃতির শীর্ষে একেবারে অবস্থানযুক্ত উপাদান রেখে এবং এটি প্রয়োজনীয় ক্লিপ দিয়ে যোগ করা যেতে পারে তবে গতিশীলভাবে পুনরায় আকার দেওয়ার সময় এটি একদম ঠিক ফিট করে না।
পদ্ধতি 6 - ক্যানভাস
(ব্রাউজার সামঞ্জস্য )
ক্যানভাসগুলি পথ আঁকিয়ে আকৃতি তৈরি করতে ব্যবহার করা যেতে পারে। নীচে স্নিপেট একটি ডেমো আছে। যে কোনও পাঠ্য সামগ্রী প্রয়োজনীয় আকারের উপরে অবস্থিত হতে পারে।
window.onload = function() {
var canvasEls = document.getElementsByTagName('canvas');
for (var i = 0; i < canvasEls.length; i++) {
paint(canvasEls[i]);
}
function paint(canvas) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
if (canvas.className == 'bottom') {
ctx.moveTo(0, 0);
ctx.lineTo(250, 0);
ctx.lineTo(250, 100);
ctx.lineTo(0, 60);
} else if (canvas.className == 'top') {
ctx.moveTo(0, 40);
ctx.lineTo(250, 0);
ctx.lineTo(250, 100);
ctx.lineTo(0, 100);
} else if (canvas.className == 'left') {
ctx.moveTo(0, 0);
ctx.lineTo(250, 0);
ctx.lineTo(250, 100);
ctx.lineTo(60, 100);
} else if (canvas.className == 'right') {
ctx.moveTo(0, 0);
ctx.lineTo(190, 0);
ctx.lineTo(250, 100);
ctx.lineTo(0, 100);
}
ctx.closePath();
ctx.lineCap = 'round';
ctx.fillStyle = 'tomato';
ctx.fill();
}
$('#increasew-canvas').on('click', function() {
$('.container').css({
'width': '150px',
'height': '100px'
});
});
$('#increaseh-canvas').on('click', function() {
$('.container').css({
'width': '100px',
'height': '150px'
});
});
$('#increaseb-canvas').on('click', function() {
$('.container').css({
'width': '150px',
'height': '150px'
});
});
};
.container {
float: left;
position: relative;
height: 100px;
width: 100px;
margin: 20px;
color: beige;
transition: all 1s;
}
canvas {
height: 100%;
width: 100%;
}
.container > span {
position: absolute;
top: 5px;
left: 5px;
padding: 5px;
}
.top + span {
top: 40%;
}
.left + span {
left: 40%;
}
body {
background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
.btn-container {
position: absolute;
top: 0px;
right: 0px;
width: 150px;
}
button {
width: 150px;
margin-bottom: 10px;
}
div:nth-of-type(3) {
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="container">
<canvas height="100px" width="250px" class="bottom"></canvas> <span>Some content</span>
</div>
<div class="container">
<canvas height="100px" width="250px" class="top"></canvas> <span>Some content</span>
</div>
<div class="container">
<canvas height="100px" width="250px" class="left"></canvas> <span>Some content</span>
</div>
<div class="container">
<canvas height="100px" width="250px" class="right"></canvas> <span>Some content</span>
</div>
<div class='btn-container'>
<button id="increasew-canvas">Increase Width</button>
<button id="increaseh-canvas">Increase Height</button>
<button id="increaseb-canvas">Increase Both</button>
</div>
পেশাদাররা
- ধারকটির মাত্রা গতিশীল হলেও আকারটি অর্জন ও বজায় রাখা যায়। সীমানা যুক্ত করা যেতে পারে।
- হোভার ইফেক্টটি ব্যবহার করে আকারের সীমানার মধ্যে সীমাবদ্ধ করা যেতে পারে
pointInpath
পদ্ধতি ।
- চিত্র বা গ্রেডিয়েন্ট ব্যাকগ্রাউন্ডও আকৃতিটিতে সরবরাহ করা যেতে পারে।
- যদি রিয়েল-টাইম অ্যানিমেশন প্রভাবগুলির প্রয়োজন হয় কারণ এটি ডিওএম ম্যানিপুলেশনের প্রয়োজন হয় না তবে ভাল পছন্দ।
কনস
- ক্যানভাস রাস্টার ভিত্তি করে এবং অত: পর কৌণিক প্রান্ত pixelated হয়ে যাবে অথবা যখন একটি বিন্দু পরলোক ছোটো ঝাপসা * ।
* - যখনই ভিউপোর্টকে পুনরায় আকার দেওয়া হয় তখন পিক্সিলেশন এড়ানোর জন্য আকারটির পুনরায় রঙ প্রয়োজন। এটা একটি উদাহরণ এখানে কিন্তু যে একটি ওভারহেড হয়।