<canvas width="1000px" height="1000px"></canvas>const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d');
const drawRect = (color, x, y, width, height) => {
ctx.fillStyle = color;
ctx.fillRect(x, y, width, height);
return {
color, x, y, width, height
}
}
drawRect('blue', 50, 50, 20, 20)
drawRect('black', 150, 150, 50, 150)
const drawLine = (x1,y1,x2,y2) => {
ctx.lineWidth = '3';
ctx.strokeStyle = 'violet';
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.closePath();
ctx.stroke();
}
canvas.addEventListener('click', (e) => {
canvas.width += 0;
const npc = drawRect('blue', 50, 50, 20, 20)
const house = drawRect('black', 150, 150, 50, 150)
drawRect('green', e.clientX, e.clientY, 20, 20)
const x1 = npc.x, y1 = npc.y, x2 = e.clientX, y2 = e.clientY;
const points = [];
for(let i = 0.0; i <= 1; i = i+0.01){
const gg = getPositionAlongTheLine(x1,y1,x2,y2, i);
drawRect('aqua' ,gg.x, gg.y, 2 , 2)
points.push({x: gg.x, y: gg.y, width: 10, height: 10})
}
for(let i = 0; i < points.length; i++){
if(collides({...points[i], width: 2, height: 2}, house)){
console.log('есть препятствие')
return;
}
}
drawLine(x1, y1, x2, y2)
})
// отдает координаты равные проценту расстояния: percentage максимум = 1
function getPositionAlongTheLine(x1, y1, x2, y2, percentage) {
return {x : x1 * (1.0 - percentage) + x2 * percentage, y : y1 * (1.0 - percentage) + y2 * percentage};
}
function collides(a,b){
return a.x < b.x + b.width &&
a.x + a.width > b.x &&
a.y < b.y + b.height &&
a.y + a.height > b.y;
}
<canvas id="canvas"></canvas>
<script>
ctx = canvas.getContext('2d');
//vvvvvvvvvvvvvvvvvvvvvv;
ctx.filter = 'blur(4px)';//<=you search this;
//^^^^^^^^^^^^^^^^^^^^^^;
ctx.font = '48px serif';
ctx.fillText('Hello world', 50, 100);
</script><canvas id="canvas" width="400" height="150"></canvas>
<div style="display:none;">
<img id="source" src="rhino.jpg" />
</div>
<script>
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
image = document.getElementById('source');
image.addEventListener('load', (e) => {
// Draw unfiltered image
ctx.drawImage(image, 0, 0, image.width * .6, image.height * .6);
// Draw image with filter
ctx.filter = 'contrast(1.4) sepia(1) drop-shadow(-9px 9px 3px #e81)';
ctx.drawImage(image, 400, 0, -image.width * .6, image.height * .6);
});
</script>"Упомянутые выше фильтры не работают в сафари."
как заметил Alexandroppolus
<!--
demo canvas with css "grayscale(1)" filter in svg container
^(this maybe need if canvas css filter not support but i no know maybe this no work)
for:
https://qna.habr.com/q/1251088#answer_2290516
-->
demo image canvas id=iDemoImage<br>
<canvas id="iDemoImage" width="100" height="100" style="border:solid 1px"></canvas>
<script>
(function(elementCanvas1,gC2,f){
gC2=elementCanvas1.getContext('2d');
function r1(n){
return Math.round(Math.random()*n)
}
for(f=0;f<50;f++){
gC2.fillStyle='rgb('+r1(255)+','+r1(255)+','+r1(255)+')';
gC2.fillRect(r1(80),r1(80),10+r1(10),10+r1(10));
}
})(iDemoImage);
</script><br><br>
demo canvas with css "grayscale(1)" filter in svg container id=iDemoFilter<br>
<canvas id="iDemoFilter" width="400" height="150" style="border:solid 1px"></canvas>
<script>
(function(elementCanvas1,gC2,image1){
gC2=elementCanvas1.getContext('2d');
gC2.drawImage(iDemoImage,25,25);
image1=document.createElement('img');
image1.src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="'
+iDemoImage.width+'" height="'+iDemoImage.height+'"> <image style="'+
/*vvvvvvvvvvvvvvv*/
'filter:grayscale(1)'/*<=css filter here*/
/*^^^^^^^^^^^^^^^*/
+'" href="'+iDemoImage.toDataURL()+'" height="100%" width="100%"/></svg>';
image1.onload=function(){gC2.drawImage(image1,150,25)};
gC2.filter='grayscale(1)';
gC2.drawImage(iDemoImage,275,25);
})(iDemoFilter);
</script>
return - прекратить вообще всё, а continue - перейти к следующему элементу. 