目前在HTML5画布的课程中，我试图保持它的美观和整洁，但我不是精通JS，我有基础，我看到其他一些人有同样的问题，但我无法让这些解决方案适合我。所以我希望有人可以解释使用eventListener，因为它适用于我的情况。注意：它会跳过第3部分和第3部分。 4因为我还没弄明白，我应该画一个五角形的开头和一把伞......唉!!
/ *********
第1部分
从点（0,0）开始绘制一个矩形 它的宽度为50像素，高度为100像素 将矩形的颜色设置为蓝色。 将笔触颜色设置为黑色，笔划的尺寸与矩形相同。
提醒 - 首先设置样式然后绘制。
******* /
//在这里绘制矩形
window.onload = function(){
var myCanvas1 = document.getElementById("Canvas1");
if(myCanvas1){
//get context
var ctx = myCanvas1.getContext("2d");
if(ctx){
ctx.strokeStyle = "black";
ctx.fillStyle = "#6363db";
ctx.lineWidth =5;
ctx.strokeRect(0, 0, 50, 100);
ctx.fillRect(0, 0, 50, 100);
}
}
}
/ *********
第2部分
从点（50,50）开始绘制一个圆圈 半径为20像素 将圆的颜色设置为红色，并将alpha设置为.5 将笔触颜色设置为黑色，并为此圆圈使用半径为30px。
提醒 - 首先设置样式然后绘制。 使用arc方法
******* /
//在这里画圆圈
window.onload = function(){
var myCanvas2 = document.getElementById("Canvas2");
if (myCanvas2 && myCanvas2.getContext){
var ctx = myCanvas2.getContext("2d");
if (ctx){
ctx.strokeStyle = "black";
ctx.fillStyle = "rgba(204, 68, 68, 0.79)";
ctx.lineWidth =5;
var degrees = 360;
var radians = (degrees/180)*Math.PI;
ctx.beginPath();
//arc = (x, y, r, sA, eA, Clock/Counter)
ctx.arc(50, 50, 30, 0, radians);
ctx.fill();
ctx.stroke();
}
}
}
/ *********
第5部分
练习使用文字。 在画布中绘制文本。它可以用任何颜色说出你想要的任何东西。
******* /
//在此处绘制文字
window.onload = function(){
var myCanvas5 = document.getElementById("Canvas5");
if (myCanvas5 && myCanvas5.getContext){
var ctx = myCanvas5.getContext("2d");
if (ctx){
var myString = "HELLO WORLD!!";
ctx.font = "12pt Helvetica";
ctx.fillStyle = "rgba(0, 157, 255, 0.79)";
ctx.fillText(myString, 25, 75);
}
}
}
/ ***************************
简单的HTML内容
**************************** /
<body>
<div id="container">
<h1>HTML5 Canvas Drawing</h1>
<!-- PART 1
Draw a rectangle starting at point (0 ,0)
That has a width of 50 px and a height of 100px
Set the color of the rectangle to a shade of blue.
Set the stroke color to black and the dimension of the stroke are the same as the rectangle.
Reminder - set the style first then draw.-->
<div id="part1">
<h2>Part 1</h2>
<canvas id="Canvas1">
Sorry, your browser does not currently support HTML5 Canvas :(
</canvas>
</div>
<!-- PART 2
Draw a circle starting at point (50 ,50)
That has a radius of 20 px
Set the color of the circle to a shade of red and set the alpha to .5
Set the stroke color to black and use a radius of 30px for this circle.
Reminder - set the style first then draw.
Use the arc method-->
<div id="part2">
<h2>Part 2</h2>
<canvas id="Canvas2">
Sorry, your browser does not currently support HTML5 Canvas :(
</canvas>
</div>
<!-- PART 3
Practice using Path drawing.
Create a 5-point star shaped pattern using the lineTo method.
Begin this shape at (100, 100)
Height and width and color are up to you.-->
<div id="part3">
<h2>Part 3</h2>
<canvas id="Canvas3">
Sorry, your browser does not currently support HTML5 Canvas :(
</canvas>
</div>
<!-- PART 4
Practice drawing with Bezier curves.
Try drawing the top to an umbrella.
This should have one large arc (a half circle) on the top and scalloped edges on the bottom.
Position, height, width and color are your choice.
Do not overlap any other object.-->
<div id="part4">
<h2>Part 4</h2>
<canvas id="Canvas4">
Sorry, your browser does not currently support HTML5 Canvas :(
</canvas>
</div>
<!-- PART 5
Practice using text.
Draw text into your canvas. It can said whatever you would like in any color.-->
<div id="part5">
<h2>Part 5</h2>
<canvas id="Canvas5">
Sorry, your browser does not currently support HTML5 Canvas :(
</canvas>
</div>
<!-- PART 6
Pixel manipulation.
Draw the image logo.png into the canvas in the following 3 ways.
1. The image exactly as it is.
2. Shrink the image by 50%
3. Slice a section of the logo out and draw that onto the canvas.
Reminder to use the drawImage method for all 3 of the ways.-->
<div id="part6">
<h2>Part 6</h2>
<canvas id="Canvas6">
Sorry, your browser does not currently support HTML5 Canvas :(
</canvas>
<img id="logo" src="image/logo.png" width= "3300px" height="1088px">
</div>
<!-- PART 7
Putting it all together.
Using a combination of all the methods.
Create a complex scene.
You must use at least 3 different methods.-->
<div id="part7">
<h2>Part 7</h2>
<canvas id="Canvas7">
Sorry, your browser does not currently support HTML5 Canvas :(
</canvas>
</div>
</div>
<script src="js/main.js"></script>
<script src="includes/modernizr.js"></script>
</body>
</html>
答案 0 :(得分：0)
你的意思是像这样画一个矩形等吗？
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.rect(188, 50, 200, 100);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
</script>
</body>
</html>
答案 1 :(得分：0)
window.addEventListener("load",functioname(),false)应该基本相同。
编辑：只是＆＃34;加载＆＃34;在.addEventListener。