canvas (画布)

1、默认尺寸300*150

2、getcontext(“2d”)获取笔

--->var ctx = myEle.getContext("2d");

3、rect(x, y, 宽, 高,)

--->ctx.rect(250, 200, 300,300);
    ctx.shadowBlur=100;
    ctx.shadowColor="greenyellow";
    ctx.fillStyle="red";
    ctx.fill();

4、fill 填充

--->ctx.rect(250, 200, 300,300);
    ctx.shadowBlur=100;
    ctx.shadowColor="greenyellow";
    ctx.fillStyle="red";
    ctx.fill();

5、stoke 画边

--->ctx.strokeStyle="yellow";
    ctx.stroke();

6、
--->每次画都要用beginpath清空

--->closepath回到起点

7、save和restore

--->save 保存当前状态

--->restore  回到上一个save状态

时间: 2024-12-17 16:13:57

canvas (画布)的相关文章

将Canvas画布内容保存为jpg格式图片

/// <summary>        /// 功能:将Canvas画布内容保存为jpg格式图片        /// 作者:GYS | 日期:2013年9月9日        /// </summary>        /// <param name="filePath"></param>        /// <param name="pixBox"></param>        pri

如何在html5的canvas画布中绘制gif动态图片

我们都知道如何在html5的canvas画布上绘制静态图片(jpeg, png等),直接用canvas中的drawImage方法即可,那么如何绘制动态图片(gif)? 相信大家都知道动态图片之所以动态,是因为它是由很多图片按一定的帧数顺序播放而成的,因此我们是否也可以模拟这样的帧数,每隔一定的时间重新 绘制图片,就能画出动态图片呢?答案当然是YES.下面就是我自己测试的一个例子,代码如下: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 &l

用canvas画布画一个画板

前段时间,在对H5的回顾中突然对canvas有了感觉,闲来无事便对其进行了一些捯饬.这不,上周我还做了一个好玩的画板呢,废话不多说,直接上代码(PS:翠花,上代码~): HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas 制作画板</title> <style> h1

JavaScript之Canvas画布

canvas可以在页面中设定一个区域,再利用JavaScript动态地绘制图像. 基本用法 使用canvas元素,首先设置width和height属性,为其设置绘制区域的大小,   如果没有设置宽度和高度,是看不到元素的,不能在其区域画图,在开始标签和结束标签之间的信息是后备信息,当用户的浏览器不支持canvas元素时会显示,用于友好地提示用户. <canvas id="canvas" width="400" height="300">

Particles.js基于Canvas画布创建粒子原子颗粒效果

文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫酷,能和鼠标互动吸附或者是躲避鼠标指针. 使用方法 1.该粒子动画库插件使用方法非常简单,首先要在页面中引入particles.js文件. <script src="js/particles.js"></script> 2.在页面中使用一个div来作为放置粒子的容器

HTML5中的&lt;canvas&gt;画布:使用canvas元素在网页上绘制四分之一圆(3)

前几天自己做了个四分之一的圆,放到手机里面测试.效果不是很好.于是今天通过查资料,找到了canvas.自己研究了一天,发现可以使用canvas画圆.代码如下: 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 </head> 8 <body&g

【读书笔记《Android游戏编程之从零开始》】12.游戏开发基础(Canvas 画布)

1.Canvas 画布 画布类 Canvas 封装了图形和图片绘制等内容,此类常用的函数说明如下: drawColor(int color) 作用:绘制颜色覆盖画布,常用于刷屏 参数:颜色值,也可用十六进制形式表示(ARGB) drawText(String text,float x,float y,Paint paint) 作用:绘制文本字符 第一个参数:文本内容 第二.三个参数:文本的X.Y坐标 第四个参数:画笔实例 drawPoint(float x,float y,Paint paint

02 Canvas画布

学习笔记适合新手,如有错误请指正.?号处也请各位指点下,谢谢. Canvas画布是承载所有UI元素的区域 所有的UI元素都必须是Canvas的子对象 创建画布: 点击导航菜单>“GameObject”>”UI“>“Canvas”导航栏 Render Mode:渲染模式(Screen Space—Overlay.Screen Space—Camera.World Space) Pixel Perfect:只有RenderMode为Screen类型才有的选项,使UI元素像素对应,效果是边缘清

【一天一个canvas】Canvas画布调整之移动、缩放、旋转(九)

有些人有些不解,为什么Canvas的坐标是从左上角开始的,而且向下是Y的正方向,向右是X的正方向?其实我也很不理解~~ 为什么就不能给我们更多的自定义功能呢?下面我改写了一段Canvas画布调整的代码,包含了Canvas画布的移动.缩放和旋转等相关功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <style type="text/c

第六章 一张白纸好作画—Canvas画布(1)

第六章 一张白纸好作画-Canvas画布 前面的相关章节,我们详细说明过Android UI组件的使用.通过前面章节的学习,开发者已经可以开发出令人满意的UI效果了.但是有的时候,我们需要实现更加漂亮的UI效果,此时可能就无法直接使用UI组件,而是需要自己画出各种UI效果了. 在Android中,Canvas就是一个画布,开发者可以在画布上绘制想要的任何东西.在本章中,我们将介绍Canvas及相关的技术. 6.1 Canvas画布介绍 6.1.1View Canvas-使用普通View的Canv