博客首页 → canvas

最新文章列表

canvas的基本绘图机制

html5的canvas标签本身并不具备任何行为，其作用仅相当于在网页上铺了一块指定大小的画布。然后，我们需要在JavaScript中使用canvas及其附属对象提供的相关API才能在canvas这块画布上作画。   在html5中，每一个canvas标签(画布)就对应JavaScript中的Canvas对象。Canvas对象本身也并不能直接用于绘画，毕竟，js中的Canvas对象是和htm ...
canvas 
青春..荒唐 评论(0) 有874人浏览 2017-12-19 16:55

canvas绘制矩形

Canvas的画笔工具——CanvasRenderingContext2D对象为绘制矩形提供了专用的方法。   rect(x, y, width, height);     <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTM ...
canvas 
青春..荒唐 评论(0) 有760人浏览 2017-12-14 19:58

canvas绘制图片

在html5中，除了利用canvas绘制矢量图形之外，我们还可以在canvas「画布」上绘制现有的图像文件。   首先，我们来看看使用canvas绘制图像文件需要用到CanvasRenderingContext2D对象的哪些主要属性和方法：      ①drawImage(mixed image, int x, int y) 以canvas上指定的坐标点开始，按照图像的原始尺寸大小绘 ...
canvas 
青春..荒唐 评论(0) 有947人浏览 2017-12-14 19:58

canvas绘制文本

在HTML5中，我们还可以在Canvas「画布」上绘制我们所需的文本文字，其中所涉及到的CanvasRenderingContext2D对象的主要属性和方法如下： 属性或方法 基本描述 font 设置绘制文字所使用的字体，例如
canvas 
青春..荒唐 评论(0) 有1217人浏览 2017-12-14 19:58

CanvasRenderingContext2D对象的主要属性与方法

本文主要介绍Canvas的「画笔」工具——CanvasRenderingContext2D对象的主要属性与方法，详情请参见以下表格(其中，蓝色标注的表示常用属性或方法)： 属性或方法 基本描述 canvas
canvas 
青春..荒唐 评论(0) 有1870人浏览 2017-12-14 19:58

CanvasGradient----画布渐变对象用法详解

想要实现诸如颜色渐变的复杂样式，就需要使用到本文将要介绍的CanvasGradient对象。   在html5中，CanvasGradient对象表示一个颜色渐变。在前面的文章中我们已经知道，将画笔(CanvasRenderingContext2D对象)的fillStyle或
canvas 
青春..荒唐 评论(0) 有1516人浏览 2017-12-14 19:47

CanvasRenderingContext2D.lineCap属性用法及示例

CanvasRenderingContext2D.lineCap属性用于指定线段的两端以何种方式结束。 CanvasRenderingContext2D对象是HTML5 Canvas中的核心对象。 CanvasRenderingContext2D.lineCap属性的取值(字符串)有以下几种：
canvas 
青春..荒唐 评论(0) 有815人浏览 2017-12-13 16:17

Canvas绘制线条(直线、折线等)

使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下： 属性或方法 基本描述 strokeStyle 用于设置画笔 ...
canvas 
青春..荒唐 评论(0) 有1512人浏览 2017-12-13 16:09

canvas入门详解

html5是新兴的网页技术标准   目前，除IE8及其以下版本的IE浏览器之外，几乎所有主流浏览器(FireFox、Chrome、Opera、Safari、IE9+)都已经开始支持html5了。   众所周知，html5中增加了许多新特性。在html5的众多特性中，Canvas应该算是最引人注目的新特性之一。我们使用html5的Canvas对象可以直接在浏览器的网页上绘制图形。这意味着浏 ...
canvas 
青春..荒唐 评论(0) 有650人浏览 2017-12-13 16:03

canvas arcTo()用法详解

之前学习了使用CanvasRenderingContext2D对象的arc()方法来绘制弧线或圆形。 今天，我们接着介绍CanvasRenderingContext2D对象的方法arcTo()的用法。 arcTo(x1, y1, x2, y2, radius)
canvas 
青春..荒唐 评论(0) 有855人浏览 2017-12-13 15:36

canvas绘制圆形或弧线

在html5中，CanvasRenderingContext2D对象也提供了专门用于绘制圆形或弧线的方法，请参考以下属性和方法介绍： arc(x, y, radius, startRad, endRad, anticlockwise) 在canvas画布上绘制以坐标点(x,y)为圆心、半径为radius的圆上的一段弧线。这段弧线的起始弧度是startRad，结束弧度是
canvas 
青春..荒唐 评论(0) 有1128人浏览 2017-12-13 15:19

canvas学习（十五）：学写一个字

先来张效果图： 这个特效是跟着慕课网上的视频学的，视频链接如下：https://www.imooc.com/learn/284 源码和技术点已经上传到附件，有需要的可以查看、下载。 下面直接上代码（PS：代码中的注释是根据个人理解添加的，并不是老师原有的注释）： 页面结构： <!doctype html> <html lang="en"> ...
canvas画板写字 
wjiaoling136 评论(0) 有870人浏览 2017-11-27 15:03

基于HTML5 Canvas 点击添加 2D 3D 机柜模型

今天又返回好好地消化了一下我们的数据容器 DataModel，这里给新手做一个典型的数据模型事件处理的例子作为参考。这个例子看起来很简单，实际上结合了数据模型中非常重要的三个事件处理的部分：属性变化事件监听、选中变化事件监听以及数据模型变化事件监听。 为了让这个例子具现化，我将这个简单的例子做了一点改动，下面我会一一解释。 例子地址：http://hightopo.com/guide/guid ...
html5canvas3d电信工控 
xhload3d 评论(0) 有1289人浏览 2017-11-27 08:05

基于 HTML5 WebGL 的 3D “弹力”布局

分子力(molecular force)，又称分子间作用力、范得瓦耳斯力，是指分子间的相互作用。当二分子相距较远时，主要表现为吸引力，这种力主要来源于一个分子被另一个分子随时间迅速变化的电偶极矩所极化而引起的相互作用；当二分子非常接近时，则排斥力成为主要的，这是由于各分子的外层电子云开始重叠而产生的排斥作用。 HT for Web 提供了弹力布局（也称为力导向布局）的功能，即根据节点之间存在互 ...
html5canvas3d工控电信 
xhload3d 评论(0) 有724人浏览 2017-11-22 23:39

基于HTML5 Canvas 实现商场监控

伴随国内经济的高速发展，人们对安全的要求越来越高。为了防止下列情况的发生，您需要考虑安装安防系统： 提供证据与线索：很多工厂银行发生偷盗或者事故相关机关可以根据录像信息侦破案件，这个是非常重要的一个线索。还有一些纠纷或事故，也可以通过录像很容易找出相关人员的责任。 人防成本高：现在很多地方想到安全就想到要雇佣保安，每个保安每个月 800，每天 3 班倒，一班人员一年就需要将近 4 万元，相比于电 ...
HTML5Canvas监控工控电信网管 
xhload3d 评论(0) 有954人浏览 2017-11-20 07:32

根据矩阵变化实现基于 HTML5 的 WebGL 3D 自动布局

在数学中，矩阵是以行和列排列的数字，符号或表达式的矩形阵列，任何矩阵都可以通过相关字段的标量乘以元素。矩阵的主要应用是表示线性变换，即
html53d工控矩阵canvas 
xhload3d 评论(0) 有1133人浏览 2017-11-13 07:53

玩转 HTML5 下 WebGL 的 3D 模型交并补

建设性的立体几何具有许多实际用途，它用于需要简单几何对象的情况下，或者数学精度很重要的地方，几乎所有的工程 CAD 软件包都使用 CSG（可以用于表示刀具切削，以及零件必须配合在一起的特征）。CSG 是 Constructive Solid Geometry 建模技术的简称，通过裁剪 subtract、融合 union 和相交 intersect 的运算，组合出复杂模型效果，HT 封装了 ht. ...
HTML53DCanvasWebGL工控 
xhload3d 评论(0) 有639人浏览 2017-11-09 07:29

基于HTML5 Canvas WebGL制作分离摩托车

工业方面制作图表，制作模型方面运用到 3d 模型是非常多的，在一个大的环境中，构建无数个相同的或者不同的模型，构建起来对于程序员来说也是一件相当头疼的事情，我们利用 HT 帮大家解决了很大的难题，无数个例子可在官网上查找到 http://hightopo.com/demos/index.html。 本文 Demo 地址： http://hightopo.com/guide/guide/plug ...
HTML5Canvas3D拓扑工控SCADAOBJ模型 
xhload3d 评论(0) 有620人浏览 2017-11-06 07:56

基于HTML5 Canvas的3D动态Chart图表

发现现在工业SCADA上或者电信网管方面用图表的特别多，虽然绝大部分人在图表制作方面用的是echarts，他确实好用，但是有些时候我们不能调用别的插件，这个时候就得自己写这些美丽的图表了，然而图表轻易做不成美丽的。。。看到有一个网站上在卖的图表，感觉挺好看的，就用 HT for Web 3D 做了一个小例子，挺简单的，也挺好看的，哈哈~ Demo 地址： http://www.hightopo ...
HTML53dcanvasSCADAchart图表 
xhload3d 评论(0) 有1244人浏览 2017-11-02 07:51

基于HTML5 WebGL实现 json工控风机叶轮旋转

突然有个想法，如果能把一些用到不同的知识点放到同一个界面上，并且放到一个盒子里，这样我如果要看什么东西就可以很直接显示出来，而且这个 ...
3DHTML5CanvasWebGLSCADA 
xhload3d 评论(0) 有1186人浏览 2017-10-26 09:23

最近博客热门TAG

Java(141747) C(73651) C++(68608) SQL(64571) C#(59609) XML(59133) HTML(59043) JavaScript(54918) .net(54785) Web(54513) 工作(54116) Linux(50906) Oracle(49876) 应用服务器(43288) Spring(40812) 编程(39454) Windows(39381) JSP(37542) MySQL(37268) 数据结构(36423)

博客人气排行榜

    博客电子书下载排行

      >>浏览更多下载

      相关资讯

      相关讨论

      Global site tag (gtag.js) - Google Analytics