要在画布上画一个矩形，求JS方法，且调用时只给里面传矩形中心坐标！

亚楠 2012-06-07 04:54:46

刚刚实习，经理就让自学HTML5，然后就出了这道难题，求助各位技术牛人！
要在画布上画一个矩形，求JS方法，且调用时只给里面传矩形中心坐标和color，求js函数，大哥大姐，详细的代码给我发一个，谢谢啦！

...全文

83 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

这是一个可以利用OpenGL硬件加速的画布控件，使用最基础的OpenGL支持（Delphi 此单元，有如下特性： 1. 硬件加速，绘图速度远远胜过GDI与GDIP。 2. 支持抗锯齿，输出图像质量较高。 3. 支持类似GDIP的坐标变换，可以完成较复杂的绘图操作。 4. 绘图函数丰富，可以绘制直线、折线、曲线、多边形、矩形、三角形，填充多边形、矩形、三角形、曲线封闭区域，并可输出文字、位图。 5. 每一个绘图方法都返回画布自身指针，支持链式操作。 6. 支持坐标变换后，Windows自身画布坐标到实际坐标的反计算，可以方便实现鼠标拾取等功能。 7. 支持OpenGL的绘制列表，可以设置Canvas为列表状态，此时所有绘制过程都会记录到一个绘制列表里。可以多次调用该列表以提高绘图速度。类似GDIP的Graphic path 尚不支持的特性与问题： 1. 由于OpenGL自身只支持凸多边形，所以使用本画布绘制非凸多边形时会有一些显示上的问题。 2. 输出ASCII文字速度很快，列表被缓存，但输出汉字等文字速度较慢。 3. 文字还无法实现响应坐标变换。 ......

获取Image对象，new出来定义Image对象的src属性，参数：图片路径定义Image对象的onload方法，调用context对象的drawImage()方法，参数：Image对象，x坐标，y坐标重载方法，调用context对象的drawImage()方法，参数：Image对象，x坐标，y坐标，图像宽度，高度重载方法，调用context对象的drawImage()方法，参数： Image对象，图像上x坐标，图像上y坐标，矩形宽度，矩形高度，画在画布上的x坐标，画在画布上的y坐标，图像宽度，图像高度调用context对象的getImageData()方法，得到

本节我们通过简单的矩形绘制学习如何实现无限画布在绘制前，我们需要矫正 canvas 的分辨率，使用 appState 保存 canvas 相关的信息。新建一个 index.jsx 文件，初始化代码如下：绘制坐标轴为方便观察，首先在 canvas 上绘制一个坐标轴。新建一个 renderScene.js 文件，实现 drawAxis 方法：然后在 index.jsx 中引入 renderScene 效果如下：在开始绘制矩形之前，我们先来看下屏幕坐标系如何转换成 canvas 坐标系。如下图所示，对于 c

功能概述 1. 鼠标在无矩形区域按下左键后拖动，生成矩形 2. 鼠标点击已绘制的矩形，选中矩形，并绘制不同选中效果 3. 鼠标在已绘制的矩形中按住左键拖动，选中并移动矩形 4. 选中矩形后鼠标在选中矩形四个角按住拖动，可缩放矩形效果预览 blog代码仅包含绘制画布部分，截图涉及列表展示、画布区域计算等，此处均省略，以一个基础页面代替实现代码 draw.js /** * 图片标记 * 参数: cav-画布对象 list-标记数组 i-选中标记下标 **/ /* 操作执.

首先，你要设计好鼠标事件处理方法，主要是鼠标左键点击，左键释放，还有鼠标移动方法其次，要了解容什么方式，画一个矩形，设计一个方法：DrawRectgle(左上角，右下角），并且要确定当调用这个方法时，要把原来已经画好的矩形清除掉（或者是根据左上，右下坐标，调整矩形的大小，这样的话，就不用清除原有的矩形）在鼠标左键按下事件中，获取鼠标位置，保存为左上角坐标，设置开始画矩形的一个标志在鼠标左键...

英特尔边缘计算技术

566

社区成员

7,027

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章