本篇文章用且仅用于个人记录学习Javascript的知识点以及一些相对应的操作,若有不对请大佬指出(orz)
步骤1.创建html和JavaScript的文件
(在vscode中创建html可以打html:5来快速获取一个格式)
如何创造一个样式CSS?
在head里面创建一个style,然后再在这个style里面使用一个canvas,canvas的属性可以如下所示
<style>
canvas{
border: 5px solid black;
}
</style>
?分别代表竖线粗细 以及颜色
注意构建body地方的内容,里面可以直接输入文字,也可以通过canvas来操作
<body>
<canvas id = "treasuresCanvas" width="800" height="600"></canvas>
<script src="ex1.js"></script>
</body>
分别代表一个canvas的大小,以及用ex1.js的文档来操作
以下是js文件里面的一些操作
//获取canvas元素对象
var canvas=document.getElementById("treasuresCanvas")
//获取canvas的绘图对象contest
var context=canvas.getContext("2d");
//文本大小
context.font='60px Arial';
//修改起始点
context.textAlign='center';
context.textBaseline='middle';
//线条绘制
context.moveTo(0, canvas.height/2);
context.lineTo(canvas.width,canvas.height/2);
//线条属性
context.strokeStyle='yellow';
context.lineWidth=10;
context.moveTo(canvas.width/2,0);
context.lineTo(canvas.width/2 ,canvas.height);
//线条属性
context.strokeStyle='yellow';
context.lineWidth=10;
context.stroke();
context.fillText("HELLO WORLD!", canvas.width/2, canvas.height/2);
|