canvas的学习

继续学习妙味课堂的知识:

这里讲的是canvas,有的浏览器不支持canvas,那么可以在这个标签里边写上文字,给不支持的浏览器的用户提示:

<canvas id="c1" width="400" height="400">
        <span>不支持的canvas的浏览器</span>
</canvas>

笔记如下:

如何绘图,看语法:

实例代码是:

window.onload = function(){
        var oC = document.getElementById(‘c1‘);
        //获取绘图的对象
        var oGc = oC.getContext(‘2d‘);//canvas是2d的,而webgl可以支持3D

        oGc.fillRect(35,10,100,100);//left,top,width,height,默认颜色:黑色
        oGc.stokeRect(10,50,100,100);//带边框的图形,默认是一像素的黑色边框
    };
时间: 2024-07-30 10:17:58

canvas的学习的相关文章

HTML5 Canvas知识点学习笔记

canvas ① 主要作用:绘制矢量图 ② 矢量图图形(路径)-(ILL) 位图图像(像素点)- PS中图像都是位图 ③ Canvas 能够制作动画,但是不是为了制作动画而生的也能够制作游戏.主要为了绘图而生. ④ 能够设置宽高 推荐样式写在style:Canvas 相当于是一个绘制图形的容器,并没有绘制功能,需要借助JS(脚本)实现绘制功能. 思路: getContext( ) var context = cnvas.getContext('2d'); // 图像的绘制 // 开始      

canvas基础学习(二)

一.图像绘制 canvas绘制图像的方法是ctx.drawImage();该方法有三种使用方式 1.ctx.drawImage(img,x,y); img是指图像对象,x和y分别是这个图像左上角在canvas画布的坐标,而图像显示的大小为图像本身的像素值,超出canvas画布的部分不显示. 2.ctx.drawImage(img,x,y,w,h); 和上面的那个函数相比,可以控制图像在canvas中显示的宽度和高度,而不再是图片自身的高宽像素 3.ctx.drawImage(img , dx ,

Canvas基础学习(一)——实现简单时钟显示

HTML5最受欢迎的功能就是<canvas>元素.这个元素负责在页面中设定一个区域,然后就可以通过JavaScript动态地在这个区域中绘制图形.关于<canvas>元素的一些基本用法可以参考w3school. 花了一下午时间熟悉了下常用的API,也参考了下网上的一些demo,实现了一个简单的时钟显示,代码记录如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <met

canvas基础学习(一)

一.概述 canvas它和其它的HTML5标签的使用基本一致,但是它相当于在浏览器中建立一个画布,可以再这个画布上画图.创建动画甚至是3D游戏.由于canvas要适配不同终端的分辨率,所以尽可能的在标签内设置高度和宽度,这个也符合W3C的标准.代码格式如下,当浏览器不支持canvas标签的时候,会显示其中的文字. <canvas id="main" width="800" height="600" > 亲,您的浏览器不支持canvas

html5中canvas的学习使用

canvas:<canvas>标签只是图形容器,你必须使用脚本来绘制图形,有一个机遇javascript的绘图API.要从同一图形的一个<canvas>标记中移除元素,往往需要擦掉绘图重新绘制它. 大多数canvas绘图API都是定义在通过画布的getContext()方法获取的一个"绘图环境"对象上. <canvas id="canvas" width="400" height="300">

canvas 的学习

canvas 绘制直线的API有: 1.moveTo()起点坐标. 2.lineTo()绘制的直线 3. fillStyle以及 flii()是绘制实体的 4. strokeStyle 和stroke()用来绘制边框的 5. beginPath()和closePath()开始新的状态. 注意: 1.canvas的作用于直线的时候是基于状态的处理.一般都在beginPath()和closePath() 中使用 线条line的各种属性: 1.lineWidth 2.lineCap有几个值butt(d

Canvas 继续学习

画一条直线 <body><canvas id="canvas" width="1024" height="768" style="display:block ;margin:0 auto ;border: 1px solid #aaa"> 您的浏览器不支持Canvas <!--这部分当不支持 Canvas时才会显示出来 否则 会被浏览器自动忽视掉我们也可以添加更复杂的内容比如图片等--> &

android 涂鸦(清屏,画笔,粗细,保存)以及canvas源码学习

更新:本文的内容只是一部分,这段时间添加了橡皮擦这个新功能,于是问题接二连三的来,比如说:如果用本文的内容去做橡皮擦的话,难!(至少我没解决,不是没背景图,就是有背景图但是更新要在下一下刷橡皮擦的时候才能更新效果),然后有个setbackgroundresource的函数,这个函数就可以了,但是问题又来了,比如说保存,清屏,但是我都解决了(清屏的话就是重新构造一个图,当clear的时候就把这张图赋值给以前的图片.保存的话我就是把绘下个图放到一张有背景的canvas上面,至是分辨率的问题自己去解决

html学习 - 检测浏览器是否支持Canvas

canvas检测 Canvas是html5中的新特性,所以并不是在所有浏览器都有很好的支持,在遇到兼容性的时候,每个人用的浏览器不同,防止出现在有些浏览器发生问题,所以在加载页面的时候就需要提前判断浏览器是否支持Canvas. 判断的方法其实有很多,Javascript本身可以判断,还有很多开发框架也提供了判断的canvas的方法. html代码 首先我们的html代码是需要有canvas的标签的. <!DOCTYPE html> <html lang="en">