canvas学习笔记之2d画布基础的实现


Posted in HTML / CSS onFebruary 21, 2019

一. Canvas是啥

< canvas > 是一个可以使用脚本(通常是js)来绘图的HTML元素

< canvas > 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard和 Safari

如今,所有主流的浏览器都支持它(IE9+,更低版本需引入Explorer Canvas来支持)

1. 开始画图(渲染上下文)

< canvas > 元素创造了一个固定大小的画布,其上的渲染上下文CanvasRenderContext2D,可以用来绘制和处理要展示的内容。

若要在canvas上绘图,首先得获取CanvasRenderContext2D2d渲染上下文。(此处指2d的,不谈webgl)

const canvas = document.getElementById('mycanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'pink';
ctx.fillRect(10, 10, 300, 300);

示例

2. CanvasRenderContext2D的属性:

通过设置上下文的属性,可以指定绘图的样式。

所有属性如下:

属性 简介
canvas canvas元素
fillStyle 用来填充路径的当前的颜色、模式或渐变
font 字体样式
globalAlpha 指定在画布上绘制的内容的不透明度
globalCompositeOperation 指定颜色如何与画布上已有的颜色组合(合成)
lineCap 指定线条的末端如何绘制
lineDashOffset 设置虚线偏移量
lineJoin 指定两条线条如何连接
lineWidth 指定画笔(绘制线条)操作的线条宽度
miterLimit 当 lineJoin 属性为 "miter" 的时候,这个属性指定了斜连接长度和线条宽度的最大比率
shadowBlur 模糊效果程度
shadowColor 阴影颜色
shadowOffsetX 阴影水平偏移距离
shadowOffsetY 阴影垂直偏移距离
strokeStyle 用于画笔(绘制)路径的颜色、模式和渐变
textAlign 文本的对齐方式
textBaseline 文字垂直方向的对齐方式

3. Canvas宽高

Canvas的宽高需要用属性值width,height来指定

若未指定,则Canvas 的默认大小为300×150

通过样式指定的宽高,只是canvas元素的显示大小,并不是绘图环境的大小

canvas {width: 1000px;height: 600px;}
<canvas id="mycanvas" width="1000" height="600"></canvas>
<canvas id="mycanvas1" width="500" height="300"></canvas>
<canvas id="mycanvas2"></canvas>
...
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 100);

宽高示例

为什么样式设置了同样大小,显示却截然不同的情况呢?

  • canvas本身有两套大小:一个是元素本身大小,一个是绘图表面(drawing surface)的大小
  • 如果通过width,height属性来设置,是同时修改了元素本身和绘图表面大小,
  • 如果canvas元素的大小不符合绘图表面大小时,则会对绘图表面进行缩放,使之符合元素本身大小,
  • 无特殊需求,建议直接使用canvas的width和height就好

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
Mar 09 HTML / CSS
让IE6、IE7、IE8支持CSS3的脚本
Jul 20 HTML / CSS
css3 实现元素弧线运动的示例代码
Apr 24 HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
Oct 21 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
Jun 28 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
Dec 26 HTML / CSS
HTML5 拖放功能实现代码
Jul 14 HTML / CSS
HTML5中indexedDB 数据库的使用实例
May 11 HTML / CSS
html2canvas把div保存图片高清图的方法示例
Mar 05 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
Jan 05 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 #HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 #HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
Apr 04 #HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
Apr 10 #HTML / CSS
canvas画布实现手写签名效果的示例代码
Apr 23 #HTML / CSS
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
Apr 26 #HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 #HTML / CSS
You might like
PHP ajax 分页类代码
2008/11/13 PHP
php 404错误页面实现代码
2009/06/22 PHP
PHP内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
JavaScript中链式调用之研习
2011/04/07 Javascript
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
基于jQuery的图片左右无缝滚动插件
2012/05/23 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
个人应聘自我评价分享
2013/11/18 职场文书
计算机专业应届生求职信
2014/04/06 职场文书
岗位说明书怎么写
2014/07/30 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
求职简历自我评价范文
2015/03/10 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
民主生活会主持词
2015/07/01 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript