《TypeScript图形渲染实战:2D架构设计与实现》 —1.4.2 编写Canvas2D类导出给main.ts调用

举报
华章计算机 发表于 2019/12/11 11:56:34 2019/12/11
【摘要】 本节书摘来自华章计算机《TypeScript图形渲染实战:2D架构设计与实现》 一书中第1章,第1.4.2节,作者是步磊峰。

1.4.2  编写Canvas2D类导出给main.ts调用

  在根目录下创建一个名为canvas2d的文件夹,在该文件夹中建立Canvas2D.ts文件,使用export关键词导出Canvas2D类。具体代码如下:

 

export class Canvas2D {

   // 源码同Canvas2DUtil类

}

 

  在main.ts中使用import关键词导入Canvas2D类:

 

import { Canvas2D } from "./canvas/Canvas2D"

 

let canvas2d : Canvas2D = new Canvas2D ( canvas ) ;

canvas2d . drawText ( " Hello World From Module ! " ) ;

 

  当使用Open In Browser 插件运行index.html后,会发现文字并没有绘制出来,通过浏览器控制台得到的错误提示是“Uncaught SyntaxError:Unexpected token {”。这是因为export / import属于ES 2015标准的内容,浏览器加载ES 2015模块化代码也是使用<script>标签,但是要加入type = "module" 属性。

  在<script>标签中加入type = "module"属性运行后,继续得到错误提示“Access to Script at 'file:///XXX/HelloWorld/main.js' from origin null' has been blocked by CORS policy : Invalid response. Origin 'null' is therefore not allowed access. ”,这个很明显是跨域问题。

  从HTTP服务器加载文件就能解决这个问题,可以使用Tomcat和Apache等开源HTTP服务器,但是既然已经安装了Node.js,那么使用NPM包管理器安装本地服务器才是最佳解决方案。


【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。