老师问个问题，canvas里什么都不显示

来源：3-1 canvas画直线（1）

小屁鹤

2019-11-08 15:59:19

画的线不显示

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 引入样式 -->
		<link rel="stylesheet" type="text/css" href="../css/element-ui.css">
		<link rel="stylesheet" type="text/css" href="../css/login.css">
		<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
		<!-- 引入组件库 -->
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script src="../js/element-ui.js"></script>
		<style>
			#myCanvas{
      			border: 1px solid red;
      		}
		</style>
	</head>

	<body>
		<div id="app">
			<div class="logincanvas">
				<canvas id="myCanvas" width="654" height="600">当前浏览器不支持canvas</canvas>
			</div>
			<div class="form-outer">
				<div class="form-space">
					<span class="login-text">登录</span>
					<span class="register-text">注册</span>
					<el-form class="form-insert" ref="form" :model="form" label-width="60px" :rules="rules">
						<el-form-item label="用户名" prop="username">
							<el-input v-model="form.username"></el-input>
						</el-form-item>
						<el-form-item label="密码" prop="password">
							<el-input v-model="form.password" type="password"></el-input>
						</el-form-item>
						<el-form-item class="form-last">
							
							<el-button type="primary" @click="onSubmit">登录</el-button>
							
							<el-button @click="resetForm">重置</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../js/login.js"></script>
		<script>
			new Vue({
				el: '#app',
				data: function() {
					return {
						form: {
							username: '',
							password: ''
						},
						rules: {
							username: [{
									required: true,
									message: '请输入用户名',
									trigger: 'blur'
								},
								{
									min: 1,
									max: 32,
									message: '长度在1-32个字符',
									trigger: 'blur'
								}
							],
							password: [{
									required: true,
									message: '请输入密码',
									trigger: 'blur'
								},
								{
									min: 6,
									max: 32,
									message: '长度在1-32个字符',
									trigger: 'blur'
								}
							]
						}
					}
				},
				methods: {
					onSubmit: function() {
						var _this = this;
						_this.$refs['form'].validate(function(valid) {
							if(valid) {
								$.ajax({
									url: 'http://127.0.0.1/user/login',
									type: 'post',
									data: _this.form,
									dataType: 'json',
									success: function(data) {
										if(data.success) {
											if(data.code == 2) {
												window.location.href='index.html';
											} else {
												_this.$message(data.message);
											}
										} else {
											_this.$message(data.message);
										}
									}
								});
							}
						});

					},
					resetForm: function() {
						this.form.username = '';
						this.form.password = '';
					}
				}
			});
		</script>
	</body>

</html>
下面是js

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(50,400);
ctx.lineTo(150,500);
ctx.lineTo(250,400);
ctx.lineTo(150,300);
ctx.lineTo(50,400);
ctx.stroke();

写回答

1回答