// 1.找到DOM节点 const canvas = document.getElementById('canvas'); // 2.画笔 --- canvas的上下文对象 const ctx = canvas.getContext('2d'); // 3.设置颜色 ---- 调色 ctx.fillStyle = "red"; // 填充颜色的设置 ctx.strokeStyle = 'blue'; // 轮廓(边框)颜色的设置 // 4.线条的设置 ctx.lineWidth =…

1.什么是SVG? 描述: 一种使用XML描述的2D图形的语言 SVG基于XML意味着,SVG DOM中的每个元素都是可用的,可以为某个元素附加Javascript事件处理器. 在 SVG 中,每个被绘制的图形均被视为对象.如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形. 2.什么是canvas? 描述: 通过Javascript来绘制2D图形. 是逐像素进行渲染的. 其位置发生改变,会重新进行绘制. 3.为什么要使用SVG 最重要的一点是SVG不依赖于终端设备的像素,可以随意放大…

文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/8372924 在前面一篇文章中,我们分析了Android应用程序窗口的绘图表面的创建过程.Android应用程序窗口的绘图表面在创建完成之后,我们就可以从上到下地绘制它里面的各个视图了,即各个UI元素了.不过在绘制这些UI元素之前,我们还需要从上到下地测量它们实际所需要的大小,以及对它们的位置进行合适的安排,即对它们进行合适的布局.在本文中,我们…

在Android系统中,有一种特殊的视图,称为SurfaceView,它拥有独立的绘图表面,即它不与其宿主窗口共享同一个绘图表面.由于拥有独立的绘图表面,因此SurfaceView的UI就可以在一个独立的线程中进行绘制.又由于不会占用主线程资源,SurfaceView一方面可以实现复杂而高效的UI,另一方面又不会导致用户输入得不到及时响应.在本文中,我们就详细分析SurfaceView的实现原理. 在前面Android控件TextView的实现原理分析一文中提到,普通的Android控件,例如T…

ylbtech-杂项:HTML5-2/3-新元素 自1999年以后HTML 4.01 已经改变了很多,今天,在HTML 4.01中的几个已经被废弃,这些元素在HTML5中已经被删除或重新定义. 为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者,等.   1.返回顶部 1. canvas 标签 描述 <canvas> 标签定义图形,比如图表和其他…

在Android系统中,有一种特殊的视图,称为SurfaceView,它拥有独立的绘图表面,即它不与其宿主窗口共享同一个绘图表面.由于拥有独立的绘图表面,因此SurfaceView的UI就可以在一个独立的线程中进行行绘制.又由于不占用主线程资源,SurfaceView一方面可以实现复杂而高效的UI,另一方面又不会导致用户输入得不到及时响应.在本文中,我们就详细分析SurfaceView的实现原理. 在前面Android控件TextView的实现原理分析一文中提到,普通的Android控件,例如T…

前言:自定义view重要的部分就是view的展示样式,为了实现view的样式可以重写onDraw()方法. 一:Override onDraw() 1.当覆盖了onDraw()方法后,需要一个Canvas变量,就是一个画布,他能画直线等各种形状,还能画bitmap等等. 当使用画布的时候,可以提供一个画笔:Paint.就是设置画出图形的一些特性,如颜色等. 二:创建图形对象 1.在android.graphics中提供了两大类: 1.Canvas:描述画什么. 2.Paint:怎么画. 2.比如…

package com.loaderman.customviewdemo; import android.animation.ValueAnimator; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Path; import android.o…

总听到很多人说H5,现在H5很火,到底H5是什么,以下发表个人对H5的理解. HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web 世界已经经历了巨变. HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 设计目的 HTML5的设计目的是为了在移动设备上支持多媒体.新的语法特征被引进以支持这一点,如video.audio和canvas 标记. HTML5还引进了新的功能,可以…

一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下,通过一个刮奖效果来学习. 二.canvas基础 本文的目标是做一个刮奖效果,但是如果都不知道canvas是怎么回事,那么肯定也无法进行下去,所以先讲讲canvas基础吧. 首先,该怎么理解canvas,思来想去,最好的理解办法应该就是把canvas理解为一个空白的画纸,一张你可以在上面画画的纸. 然…