English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Из-за того, что в последние два года HTML5 очень популярен, я изучил его, недавно у меня была идея, которая также требует использования связанных функций HTML, поэтому я решил хорошо выучить это.
Я хорошо изучил функции Canvas, чувствую, что функциональность взаимодействия в客户端 HTML5 становится все более сильной, сегодня я изучил рисование Canvas, вот несколько примеров, запомню, чтобы использовать их в будущем.
1. Использование Canvas для рисования прямой линии:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.moveTo(20,30); // Первый пункт
cans.lineTo(120,90); // Второй пункт
cans.lineTo(220,60); // Третий пункт (от второго пункта)
cans.lineWidth=3;
cans.strokeStyle = 'red';
cans.stroke();
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
Здесь используются два API метода, moveTo и lineTo, которые являются начальными и конечными координатами отрезка, переменные (X координата, Y координата), strokeStyle и stroke - это стиль рисования пути и сам путь.
2. Рисование градиентной линии
Линейная линия градиента создает эффект постепенного изменения цвета,当然, стиль градиента может следовать направлению пути или не следовать ему:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.moveTo(0,0);
cans.lineTo(400,300);
var gnt1 = cans.createLinearGradient(0,0,400,300); // Линейный градиент с начальными и конечными координатами
gnt1.addColorStop(0,'red'); // Создание начального цвета градиента, 0 означает смещение, личное понимание - это относительная позиция на прямой, максимальное значение 1, в одном градиенте можно указать любое количество цветов градиента
gnt1.addColorStop(1,'yellow');
cans.lineWidth=3;
cans.strokeStyle = gnt1;
cans.stroke();
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
3. Рисование прямоугольника или квадрата:
Такой прямоугольный контур в HTML4 можно создать только с помощью серверного кода, а теперь HTML5 предоставляет функцию Canvas, которая легко позволяет нарисовать прямоугольник,所以说 преимущества HTML5 очень высоки.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.fillStyle = 'yellow';
cans.fillRect(30,30,340,240);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
Здесь используется метод - fillRect() - по прямому значению этого метода можно понять, что это заливка прямоугольника, стоит отметить, что параметры fillRect(X,Y,Ширина,Высота) отличаются от координат в математике, подробности см.
Здесь X, Y - это относительные координаты, начинающиеся от верхнего левого угла Canvas, запомните это!
4. Рисование простого прямоугольного контура
В предыдущем примере говорилось о том, чтобы нарисовать прямоугольник с заливкой цвета, а в этом примере просто нарисован прямоугольник без заливки.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.strokeStyle = 'red';
cans.strokeRect(30,30,340,240);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
Это очень просто, как и в предыдущем примере, только вместо fill используется stroke, подробности см. в предыдущем примере.
5. Рисование прямоугольника с линейным градиентом
Градиент - это довольно неплохой эффект для заливки, комбинируя примеры 2 и 3, мы можем создать градиентный прямоугольник
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
var gnt1 = cans.createLinearGradient(10,0,390,0);
gnt1.addColorStop(0,'red');
gnt1.addColorStop(0.5,'green');
gnt1.addColorStop(1,'blue');
cans.fillStyle = gnt1;
cans.fillRect(10,10,380,280);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
Не нужно объяснять, запомните fillRect(X,Y,Ширина,Высота) и все.
6. Заполнение круга
Круглые объекты имеют广泛应用，естественно, это также включает эллипсы.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.beginPath();
cans.arc(200,150,100,0,Math.PI*2,true);
cans.closePath();
cans.fillStyle = 'green'; //本来这里最初使用的是red，截图一看，傻眼了，怕上街被爱国者打啊，其实你懂的~~
cans.fill();
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
Использование метода arc в данном случае arc(X,Y,Radius,startAngle,endAngle,anticlockwise), что означает (координата X центра круга, координата Y центра круга, радиус, начальный угол (радианы), конечный угол (радианы), рисуется ли по часовой стрелке);
Сравнение параметров arc:
a、cans.arc(200,150,100,0,Math.PI,true);
c、cans.arc(200,150,100,0,Math.PI/2,true);[/code]
c、cans.arc(200,150,100,0,Math.PI/2,true);
d、cans.arc(200,150,100,0,Math.PI/2,false);
7、Круговая область
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.beginPath();
cans.arc(200,150,100,0,Math.PI*2,false);
cans.closePath();
cans.lineWidth = 5;
cans.strokeStyle = 'red';
cans.stroke();
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="400px" height="300px">4</canvas>
</body>
</html>
Здесь не объясняется, как и в предыдущем примере, lineWidth контролирует ширину линии.
8、Круговая градиентная заливка
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style type="text/css">
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
var gnt = cans.createRadialGradient(200,300,50,200,200,200);
gnt.addColorStop(1,'red');
gnt.addColorStop(0,'green');
cans.fillStyle = gnt;
cans.fillRect(0,0,800,600);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="800px" height="600px">4</canvas>
</body>
</html>
Здесь необходимо пояснить метод createRadialGradient, параметры: (Xstart,Ystart,radiusStart,XEnd,YEnd,radiusEnd), то есть, при выполнении градиента используются два круга: один исходный круг и один градиентный круг. На самом деле,这种方式 с использованием координат и радиуса может реализовать множество стилей, например
Объемный круг
var gnt = cans.createRadialGradient(200,150,0,200,50,250); gnt.addColorStop(0,'red'); gnt.addColorStop(1,'#333');
Вот и все, что было в этой статье, надеюсь, это поможет вам в изучении. Также希望大家多多支持呐喊教程。
Заявление: содержимое статьи взято из Интернета, авторские права принадлежат соответствующему автору, материал предоставлен пользователями Интернета в порядке добровольного вклада и загрузки, сайт не имеет права собственности на него, материал не был отредактирован вручную, и сайт не несет ответственности за него. Если вы обнаружите материалы,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (при отправке письма замените # на @) для сообщения о нарушении,并提供相关证据. При подтверждении факта нарушения сайт незамедлительно удалят涉嫌侵权的内容。