了解canvas:canvas标签是用作图形绘制,但是通过js脚本来实现的,canvas标签其实只是一个容器

,最终实现绘制功能肯定是通过js脚本实现。

首先肯定要定义一个canvas标签当做容器

<canvas id="myCanvas" width="200" height="100"></canvas>

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成,所以需要获取画布对象,绘制的方法和属性就在创建的ctx对象的方法和属性上:

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx属性和方法:

1:fillstyle属性 : CSS颜色,渐变,或图案。fillStyle 默认设置是#000000(黑色)

ctx.fillStyle="#FF0000";

2:fillsReact方法:方法定义了矩形当前的填充方式。 x,y 起点的坐标   width height 绘制的宽高

ctx.fillRect(0,0,150,75);

3:

在Canvas上画线,我们将使用以下两种方法:

moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
闭合即可,上一个终点可以是下一个起点,这样可以用线绘制图形 stroke() 方法闭合即可 . 4:canvas 绘制文本 font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
使用 fillText(): var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("Hello World",10,50); 5 Canvas - 图像
把一幅图像放置到画布上, 使用以下方法: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("scream"); ctx.drawImage(img,10,10);

  

canvas的使用方法的更多相关文章

  1. canvas主要属性和方法

    canvas主要属性和方法 方法                                   描述 save()                           保存当前环境的状态 res ...

  2. 安卓中Paint类和Canvas类的方法汇总

    Paint类的常用的方法 1.setColor方法,用于设置画笔的颜色,public void setColor(int color)//参数color为颜色值,也可以使用Color类定义的颜色Col ...

  3. javascript canvas 生成图片的方法

    javascript canvas 生成图片的方法 先生成base64格式的图片 然后ajax传到后台 写入服务器文件夹即可<pre><!DOCTYPE HTML><ht ...

  4. android: Canvas的drawArc()方法的几个误区

    绘制圆环很多时候会用到Canvas的drawArc方法, drawArc()方法的说明很简单: public void drawArc (RectF oval, float startAngle, f ...

  5. 使用canvas元素-art方法绘制圆弧

    最近在学习HTML5,发现canvas真的很棒,canvas元素是一种可供绘图的平面,我们用JavaScript对它进行配置和操作.我这里说一下arc方法绘制圆弧,顺便提一下涉及到的基础知识. 首先看 ...

  6. canvas导出图片方法总结

    html代码 <canvas id="canvas" width="100" height="100" ></canvas ...

  7. html --- canvas --- javascript --- 绘图方法

    Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像. 如有疑问请访问链接:http://javascript.ruanyifeng.com/htmlapi/canvas.html < ...

  8. HTML5 canvas图像绘制方法与像素操作属性和方法

    图像绘制方法 drawImage()        向画布上绘制图像.画布或视频 像素操作属性和方法 width                                返回 ImageData ...

  9. Canvas的drawImage方法使用

    canvas是HTML5中的一个新元素,这个元素可以通过JavaScript用来绘制图形.例如可以用它来画图.合成图象.做一些动画等. 通常呢,我们在canvas上画图的方法是使用Image对象.基本 ...

  10. <canvas>中isPointInPath()方法在不同绘制内容中的效果

    <canvas>是HTML5中新增加的一个元素,我们可以使用脚本(通常使用JavaScript)在上面绘制图形,就像个画布一样.我们可以用它来绘制图表.制作一些动画.默认大小为300px ...

随机推荐

  1. less和sass的区别

    首先sass和less都是css的预编译处理语言,他们引入了mixins,参数,嵌套规则,运算,颜色,名字空间,作用域,JavaScript赋值等 加快了css开发效率,当然这两者都可以配合gulp和 ...

  2. HTML5+CSS3(2)

    一.视频与音频 1.用JavaScript检测音频格式支持 <!DOCTYPE html> <html> <head> <meta charset=" ...

  3. (Python基础)最Low三级菜单

    #-*-coding:utf-8-*- #_author_: Keep #三级菜单 menu = { '中国':{ '广东省':{ '广州市':{ '海珠区':{}, '荔湾区':{}, '越秀区': ...

  4. 用ASP.NET_Regsql.exe创建Session数据库

    CMD: C:\Users\ZhangSC>C:\Windows\Microsoft.NET\Framework64\v4.0.30319\aspnet_regsql.exe -S ZhangS ...

  5. thinkphp3.2.3集成腾讯云短信文档流程

    昨天晚上折腾了一个小时没解决 今天折腾了20分钟就搞定了 看了thinkphp3.2.3的命名空间解释方法  把文件放到这里 /ThinkPHP/Library/Org/ 把新建了一个Sms文件夹 把 ...

  6. selenium2 webdriver 常用的python 函数

    新建实例driver = webdriver.Chrome() 1.通过标签属性Id查找元素 方法:find_element_by_id(element_id) 实例:driver.find_elem ...

  7. Entity Framework 支持 DataTable

    转载:http://www.cnblogs.com/wlflovenet/archive/2011/12/30/EF11.html https://www.cnblogs.com/hanjun0612 ...

  8. 一个request引发的bug

    有很多错误由于需要是多线程是才会发生,导致经常在开发时很难发现, import java.lang.reflect.ParameterizedType; import java.util.List; ...

  9. linux 之分区和文件系统

    分区类型 主分区:总共最多只能分4个 扩展分区:只能有一个,也算作主分区的一种,也就是说主分区加扩展分区最多4个,但是扩展分区不能存储数据和格式化,必须再划分成逻辑分区才能使用. 逻辑分区:逻辑分区是 ...

  10. IE6-IE9中tbody的innerHTML不能赋值

    对于IE6-IE9里如果要设置tbody的innerHTML,可以使用如下替代方法 Js代码 function setTBodyInnerHTML(tbody, html) { var div = d ...