java-js知识库之一——canvas绘制9*9乘法表

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了java-js知识库之一——canvas绘制9*9乘法表，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2113字，纯文字阅读大概需要4分钟。

内容图文

       不知不觉一年又要过去了，软件这一行入坑快两年了，一直不知道这两年干了些啥，也不知道自己到底会些什么，工作也是些简单的东西，谁都能做，对未来也是很茫然。今天和同事优化数据库，头都是懵的，很多东西都感觉似曾相识，但就是记不起来，最后只能选择百度。。。。，才发觉该将自己会的东西梳理一下了，今天开始记录自己会的知识，以日记的模式，记在这里，以便日后查看，争取一天一个知识点，贵在坚持，今天开始，构建自己的知识库。

       第一天，利用canvas绘制9*9乘法表。

       第一次接触canvas是在去年十月份开发一款app时,到现在也已经一年多了，当时因为业务需求手机端的照片上传下载和展示，照片须存储在内网环境，当时将照片利用canvas转化为base64编码，传递后台存入服务器。现在重新梳理下canvas知识，绘制一个乘法表。

       首先，先明确需要做什么，先用java控制台输出乘法表。

for(int i=1;i<10;i++) {
    for (int j = 1; j < i+1; j++) {
        System.out.print(i+"*"+j+"="+i*j+"\t");
    }
    System.out.println();
}

      输出如图所示：

     

     现在开始使用canvas绘制乘法表，工作的时候一直使用jquery，这是个不好的习惯，导致自己的原生js水平一直得不到提升，现在尽量使用原生js。

     直接上代码，代码里会详细些注释。

<!--html只有一个canvas标签，定义画布的宽和高-->
<canvas id="canvas" width="600" height="500"></canvas>

//获取canvas标签
var canvas = document.getElementById("canvas");
//获取2d画布，3d的是webgl,目前不会。。。
var ctx = canvas.getContext("2d");
//设置字体大小
ctx.font = "20px 宋体";
//设置字体颜色
ctx.fillStyle = "blue";
   
//定义绘制一个乘法的对象
function Multiplication(x,y){
    this.x = x;
    this.y = y;
}
   
//给对象定义一个绘制的方法
Multiplication.prototype.draw = function(){
    //参数依次为:文字内容，如1*1=2、绘制文字的x坐标、绘制文字的y坐标、文字允许的最大宽度
    ctx.fillText(this.x+"*"+this.y+"="+this.x*this.y,60*(this.y-1)+10,30*this.x,50);
}
   
for(var i = 1;i < 10;i++){
   for(var j = 1;j < i+1;j++){
      //获取对象
      var drawing = new Multiplication(i,j);
      //绘制乘法项
      drawing.draw();
   }
}

      页面如图：

  

       canvas绘制9*9乘法表就结束了，很简单的逻辑，代码也简单，现在现将代码放到我的服务器上去，如有兴趣可点击下方链接看看效果。

       canvas绘制9*9乘法表展示链接http://yktzs.top/canvas/multiplication.html。

       如有错误，欢迎指正QQ：1505771465

 

　　

内容总结

以上是互联网集市为您收集整理的java-js知识库之一——canvas绘制9*9乘法表全部内容，希望文章能够帮你解决java-js知识库之一——canvas绘制9*9乘法表所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---