首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用HTML5和Javascript设计绘图程序

这里我们要对4个鼠标的相关事件进行编码,并且要编写两个相关的方法addClick和redraw。...再来看下redraw这个方法,其作用为每次都清空画板,然后重新把所有的点都画过,效率不高,但作为本例子来说还是可以接受,代码如下: function redraw(){ canvas.width = canvas.width...的方法中,我们去掉context.strokeStyle一句,将绘画笔的颜色设置到for循环中去设置,更新后的redraw代码如下: function redraw(){ /* context.strokeStyle...并且也要更新redraw方法,更新后的addClick,redraw代码如下: function addClick(x, y, dragging) { clickX.push(x); clickY.push...同样要在redraw的方法中对新的两个绘图工具进行处理,代码如下: function redraw(){ context.lineJoin = "round"; for(var i=0; i < clickX.length

1.2K20
您找到你想要的搜索结果了吗?
是的
没有找到

vue+webpack实现精美游戏设计:实现建筑物的渐变生成效果

负责绘制绘制页面的是redraw函数,因此我们也要进行相应修改,代码修改如下: redraw (layer, tiles) { // 先创建一个二维数组,然后从建筑物记录数组中找到当前已经放置到方格里的建筑物...constrcutionStep1 和 constructionStep2 分别用来把建筑物生成时两阶段对应的图片加载到页面里,getBuildingByName根据传入的建筑物名称调用不同的函数加载对应图片,这个函数是redraw...里被调用的,redraw()通过变量城市图层的网格区,得知每个网格区建筑物的名称,然后调用getBuildingByName将建筑物对应的图片加载到浏览器后,绘制到页面上。...最后代码的改动在tick函数: tick () { .... // change here this.cityGrowingTick() this.redraw(this.cityLayer...每次tick函数触发时,它便调用cityGrowingTick函数,用来计算当前正在处于建造期的所有建筑是否应该进入下一关形态,redraw调用时则对形态有变更的建筑物根据当前所在阶段进行重新绘制。

47630
领券