如何使用canvas绘图
这里是修真院前端小课堂,每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能,本篇分享的是:
【如何使用canvas绘图】
1.背景介绍
Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表、动画等。
没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和Flash进行交互。有了Canvas,我们就再也不需要Flash了,直接使用JavaScript完成绘制。
2.知识剖析
2.1 canvas的兼容性
Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 标签。
2.2 canvas的一些基本属性
首先得说下width和height属性了,这是在canvas中必备的属性。
width:画布的高度。和一幅图像一样,这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变的时候,在该画布上已经完成的任何绘图都会擦除掉。;默认值是 300。
height:画布的宽度。和一幅图像一样,这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。当这个值改变的时候,在该画布上已经完成的任何绘图都会擦除掉。默认值是 width的一半。
123
如何利用dom绘出一些简单的图
在这里就需要用到一些属性:
fillStyle:设置或返回用于填充绘画的颜色、渐变或模式。比如说绘制一个渐变色的矩形
fillRect(x,y,width,height):从坐标(x,y)处绘制一个长度为width,宽度为height的填充矩形
demo1 制作渐变矩形
var a=document.getElementById("myCanvas");
var demo1=a.getContext("2d");
var my_gradient=demo1.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"red");
my_gradient.addColorStop(1,"blue");
demo1.fillStyle=my_gradient;
demo1.fillRect(20,20,150,100);
strokeStyle:设置或返回用于笔触的颜色、渐变或模式。
strokeRect(x,y,width,height):从坐标(x,y)处绘制一个长度为width,宽度为height的矩形边框
line-width:表示边框宽度
canvas里面还可以添加一些文本属性,比如说font,textAlign,textBaseline等等
demo2制作渐变矩形框
var b=document.getElementById("myCanvas");
var demo2=b.getContext("2d");
var gradient=demo2.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","#FFF");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用渐变进行填充
demo2.strokeStyle=gradient;
demo2.lineWidth=10;//边框宽度
demo2.strokeRect(20,20,150,100);
demo3 使用font, textAlign属性
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 在位置 150 创建蓝线
ctx.strokeStyle="blue";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// 显示不同的 textAlign 值
ctx.textAlign="start";
ctx.fillText("textAlign=start",150,60);
ctx.font="40px Arial";
ctx.textAlign="end";
ctx.fillText("textAlign=end",150,80);
ctx.textAlign="left";
ctx.fillText("textAlign=left",150,100);
ctx.textAlign="center";
ctx.fillText("textAlign=center",150,120);
ctx.textAlign="right";
ctx.fillText("textAlign=right",150,140);
2.3 canvas中的一些常用方法
1).lineTo():添加一个新点,然后在画布中创建从该点到最后指定点的线条
2).moveTo():把路径移动到画布中的指定点,不创建线条
3).stroke():绘制已定义的路径
demo4 canvas显示路径;
var canvas = document.getElementById('myCanvas'); //获取上下文对象,canvas很多常用方法都是基于这个对象实现的
var context = canvas.getContext("2d"); //目前参数只有2d
context.lineWidth = 5; //线条宽度
context.moveTo(10,10); //光标移到这点
context.lineTo(10,50); //下一点坐标
context.lineTo(100,50); //下一点坐标
context.stroke(); //绘制路径
4).beginPath():起始一条路径,或重置当前路径
5).arc():创建弧/圆线
6).closePath():创建从当前点回到起始点的路径
demo5.绘制三角形
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();
3.常见问题
图像能不能放到canvas上?
4.解决方案
可通过使用drawImage(image,x,y)就可以将图像放到canvas上,然后在canvas内设置宽高,就可以将图像放到画布中。
demo6.利用canvas渲染图片
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("img");
img.onload = function() {
ctx.drawImage(img,0,0);
}
5.编码实战
6.扩展思考
在上个demo中发现如果设置canvas标签css的width,height与在canvas中设置width,height不一样,这是为什么?
高度和宽度是用于绘图的逻辑帆布尺寸和是不同的距离style.height和style.widthCSS属性。如果不设置CSS属性,画布的本征大小将被用作显示大小; 如果设置CSS属性,并且它们与画布尺寸不同,则您的内容将在浏览器中缩放。
7.参考文献
参考一:https://stackoverflow.com/que... width,style height的区别
参考二:http://www.runoob.com/html/ht... Canvas | 菜鸟教程
参考三:http://www.w3school.com.cn/ht... HTML5标签Canvas
如何使用canvas绘图相关推荐
- Android中Canvas绘图之Shader使用图文详解
概述 我们在用Android中的Canvas绘制各种图形时,可以通过Paint.setShader(shader)方法为画笔Paint设置shader,这样就可以绘制出多彩的图形.那么Shader是什 ...
- H5 canvas 绘图
H5的canvas绘图技术 canvas元素是HTML5中新添加的一个元素,该元素是HTML5中的一个亮点.Canvas元素就像一块画布,通过该元素自带的API结合JavaScript代码可以绘制各种 ...
- Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报 如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
- [转]基于Prototype,利用Canvas绘图实现的web流程图设计器(原型)
基于Prototype,利用Canvas绘图实现的web流程图设计器(原型) 关键字: javascript prototype script.aculo.us canvas 流程图 web画线 刚才 ...
- 每天一个JavaScript实例-canvas绘图
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Android--使用Canvas绘图
前言 除了使用已有的图片之外,Android应用常常需要在运行时根据场景动态生成2D图片,比如手机游戏,这就需要借助于Android2D绘图的支持.本篇博客主要讲解一下Android下使用Canvas ...
- canvas 绘制直线 并选中_javascript自学记录:canvas绘图
由于学习js是为爬虫服务,所以canvas绘图学习并不完整. 第15章 使用Canvas绘图 15.1 基本用法 HTML文件中需要有canvas元素,两标签之间的文字是浏览器不支持时显示的. A d ...
- Canvas绘图基础(一)
简单图形绘制 矩形:描边与填充 Canvas的API提供了三个方法,分别用于矩形的清除.描边及填充 clearRect(double x, double y, double w, double h) ...
- canvas绘图有锯齿毛边问题的解决
canvas绘图有锯齿毛边问题的解决 canvas绘制的一个圆形,用于表现移动端的朝向及视场角,绘制完成后出现了明显的锯齿,移动端看的时候也是非常明显,如下图所示: 本次主要是通过 hidpi-can ...
最新文章
- 谢文睿:西瓜书 + 南瓜书 吃瓜系列 4. 二分类线性判别分析
- Android测试原理(二)
- 迈入幸福婚姻殿堂的星座女
- python_redis模块
- 提升体验-支持Chrome Custom Tabs
- 17 CO配置-控制-产品成本控制-产品成本计划编制-定义成本核算类型
- mysql日志存储类型_msyql 日志分类、存储、慢查询日志
- 【python】导入HTMLTestRunner失败---报错ModuleNotFoundError: No module named ‘HTMLTestRunner‘
- python文件重命名加日期_Python文件创建日期和重命名 - 批评请求
- Mysql管理之二进制日志文件的管理
- 【感悟】放开那条大腿,让我来!
- mysqldump 快还是navicat快_剪辑软件评测:选喵影工厂、爱剪辑还是快剪辑?
- 乌龟GIT的合并代码
- uc手机浏览器 手机模拟_在PC上测试移动端网站和模拟手机浏览器的5大方法
- 查看电脑开关机时间和记录
- 高通qspr是哪几个单词得缩写_无线通讯中的TX/RX具体所指什么? 是哪几个单词的缩写?...
- 愿你永远像个boy,找到自己的光亮
- 2021年最新最全Flink系列教程_Flink快速入门(概述,安装部署)(一)(JianYi收藏)
- 技术博客|第8期:广告流量匹配算法在Hulu/Disney Streaming平台的实战
- CPU与GPU计算能力比较