H5----初识canvas

  今天看了下HTML5画布,初步了解了一下canvas对象。

-----------------------------------------------------------------------------

<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");/*javaScript使用id来寻找canvas元素*/
var cxt = c.getContext("2d");/* 创建context对象 这个对象是内建的HTML5对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法*/
cxt.fillStyle="#ff0000";/*颜色设置*/
cxt.fillRect(0,0,150,75);/*矩形*/

cxt.moveTo(10,10); /*把路径移动到画布中的指定点,不创建线条*/
cxt.lineTo(150,50);/*添加一个新点,然后在画布中创建从该点到最后指定点的线条*/
cxt.lineTo(10,50);
cxt.stroke();/*绘制已定义路径*/
cxt.beginPath();/*重置当前路径*/
cxt.arc(70,18,15,0,Math.PI*2,true);/*创建弧/曲线(用于创建圆形或部分圆)*/
cxt.closePath();/*创建从当前点回到起始点的路径*/
cxt.fill();/*填充当前绘图(路径)*/

</script>

------------------------------------------------------------------------------

如下图所示:

时间: 2024-11-05 06:24:47

H5----初识canvas的相关文章

关于h5绘制canvas生成图片的注意点!

1.第一个是关于移动端自适应的问题: 答:如果是最后只要一张canvas生成的图片,而不是要绘制的canvas的图形,则不需要考虑自适应,绘制canvas的时候的宽高,可以直接写成UI提供的图的大小,比如UI提供的图是 750 * 1280 ,则绘制canvas的时候,所有的数据都可以 以375*640来进行计算,固定好即可!这个跟后台绘制图片的原理一样,我们不需要考虑自适应,ui给什么图,或者说我们希望要多大的图片,我们直接绘制即可,因为图片最后自己可以按比例伸缩,默认即是自适应! 2.关于H

h5标签canvas关于getImageData跨域的问题

在学习h5的时候,canvas标签中getImageData()报错:security error! 具体代码如下(chrome浏览器): function createGSCanvas(img){ var canvas=document.createElement("canvas"); canvas.width=img.width; canvas.height=img.height; var ctx=canvas.getContext("2d"); ctx.dra

用H5的canvas做时钟

<!doctype html><html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="can1" width="500px" height="500px"></canvas> <scr

H5之canvas简单入门

<canvas></canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件,其中就有绘图的方法,js能够调用它来进行绘图 <canvas id="myCanvas" width="400" height="400"></canvas>默认宽度300px,默认高度 150px; 下面是简单的语法,是必须要记住的. 绘图路径: beginPath() :开始路径 c

H5之canvas

Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表.动画等. 在使用Canvas前,用canvas.getContext来测试浏览器是否支持Canvas: <!-- HTML代码 --><canvas id="test-canvas" width="200" heigth="100"><p>你的浏览器不支持Canvas</p></canvas>

HTML5 初识 - Canvas

呃.. 今天开始看一下HTML5的一些东西了. 准备工作: 1.一个支持HTML5的浏览器(我用的Opera11.52和IE9),当然,火狐的和Chrome的近几个版本都能很好地支持HTML5 2.一个HTML的手册(说明书),以方便查阅. 因为发现目前用得比较多的是canvas,所以直接看了传说中很牛x的canvas标签的大概使用! 1.HTML中的canvas标签用于画图...貌似有点废话,canvas不就是个画布么 . 2.canvas标签中画图是由js控制,其中包含HTML5新添加的几个

一个在h5的canvas元素中画扑克牌jquery插件实现

1 //非架构 2 ; (function ($) { 3 var aspect = 5.7 / 8.8;//扑克宽和高比例 4 function PaintBoder(canv, x, y, h,poker) { 5 var boder = new Boder(canv, h); 6 boder.X = x; 7 boder.Y = y; 8 var c = canv.getContext("2d"); 9 c.save() 10 c.lineWidth = 1; 11 boder.

初识canvas

· Canvas的基本用法· <canvas> 标签只有两个属性—— width和height,canvas会初始化宽度为300像素和高度为150像素· getContext()方法是用来获得渲染上下文和它的绘画功能· <canvas>默认的是inline,所以如果要利用margin居中,就必须设置width和block· 绘制矩形: fillRect(x, y, width, height) 绘制一个填充的矩形 strokeRect(x, y, width, height) 绘制

H5 认识canvas

不同于SVG,HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径.不过,我们拥有众多路径生成的方法让复杂图形的绘制成为了可能. canvas提供了三种方法绘制矩形 fillRect(x, y, width, height)  绘制一个填充的矩形: strokeRect(x, y, width, height)  绘制一个矩形的边框: clearRect(x, y, width, height)   清除指定矩形区域,让清除部分完全透明. x与y

H5利用canvas实现海报功能

最近接到一个需求,微信中用户上传图片生成海报.这个需求比较常规,实现思路也比较简单,通过利用用户的input输入,对所上传的图片进行处理,最后通过第三方库html2canvas合成对应的图片即可.思路虽然简单,但是在实现的过程中会遇到各种各样的小问题,现在就将遇到的问题进行一次总结. 1.iphone以及部分android机型通过摄像头拍摄的照片被旋转了90度 原因:由于目前的手机拍照基本都在2M以上,而ios中只要超过2M图片就会自动旋转.拍照后直接取出来的UIimage(用UIImagePi