html5中在canvas上绘图
canvas是通过JavaScript控制的,而且其大小必须在绘制的时候就确定大小,不能再通过控制或改变canvas元素的大小
//html代码
<canvas id="my_canvas" width="150" height="150">fallback content here
</canvas>//js代码
//通过JavaScript查看浏览器是否支持canvas元素
var canvas=document.getElement('my_canvas');
//先通过id属性获得canvas,看浏览器支持canvas的getContext方法
if(canvas.getContext){//2d的意思表示创建的是一个风格,左上角是坐标原点var context=canvas.getContext("2d");//设置图形的颜色为红色context.fillStyle="rgb(200,0,0)";//设置图形的起点坐标X\Y,长和宽,下面画的是一个起点是(10,10)长和宽都是100的正方形context.fillRect(10,10,100,100);//向画布中加入文字context.font='italic 40px sans-serif';context.textBaseline='top';context.fillText('AwesomeCo',60,0);//在canvas中绘制线条context.lineWidth=2;context.beginPath();//画四个点context.moveTo(0,40);context.lineTo(30,0);context.lineTo(60,40);context.lineTo(285,40);//只有使用了stroke方法才能画出线来context.stroke();context.closePath();//移动画板原点//在移动原点前要先使用save()方法保留原点,以便恢复时使用,设置为还原点,还原点是以栈的结构存储//恢复时可以通过restore()恢复到栈最上面的还原点context.save();//移动到新的原点,并画一个正方形context.translate(20,20);context.fillRect(0,0,20,20);//绘制三角形//要先给画笔上色context.fillStyle='#fff';//注意到给画笔上色的两种方法可以使用rgb(a,b,c)也可以使用‘#abc’样式//strokeStyle可以用来设置图形轮廓的颜色context.strokeStyle='#fff';context.lineWidth=2;context.beginPath();context.moveTo(0,20);context.lineTo(10,0);context.lineTo(20,20);context.lineTo(0,20);context.fill();context.closePath();context.restore();
}else{//如果浏览器不支持canvas则此处应用来显示替代canvas的文本内容
}
知识点扩充:
比较stroke与fill,strokeStyle与fillStyle的区别
stroke:线条,外形,轮廓
fill:封闭图形的内部
在使用stroke及fill时都要先使用
context.lineWidth=;
context.beginPath()
/**/
/**/
context.closePath();
stroke中的/**/内容为
context.strokeSytle=;
context.stroke();
为所画的内容画线条
fill中的/**/内容为
context.fillStyle=;
context.fill();
当所画的图形为封闭图形时,画笔会自动上色并且全部显示出来
这两个方法也可能同时使用
由于IE9之前的版本不能很好的兼容canvas元素,Google发布了一个名为ExplorerCanvas的库,为IE用户开放了几乎所有的Canvas APi
我们在使用时只需要将js引入就可以
<!--[if lte IE 8]>
<script type=”text/javascript”
charset=”utf-8”
src=”js/excanvas.js”>
</script><!--[endif]-->
转载于:https://www.cnblogs.com/Dream-Seeker/p/4434411.html
html5中在canvas上绘图相关推荐
- HTML5 中的canvas元素用于,HTML5中的Canvas元素
canvas 元素用于在网页上绘制图形. 什么是Canvas? HTML 5 的canvas元素使用JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas ...
- HTML5中的canvas(画布)
HTML5中的canvas(画布) 1.关于canvas的简介 1.canvas是HTML5标签,表示画布,canvas只是作为图像绘制的容器,所有的绘制工作都在脚本JavaScript内部完成. 2 ...
- html5中用画布画小狗,HTML5中的Canvas(绘制)
Canvas中不仅可以画线(路径),还能画很多其他的图像,这一章就介绍Canvas的其他两种绘图API. 矩形 我们在上一章只用线来画了一个矩形,其实可以一下子就画出来的,用下面函数: ctx.fil ...
- 用html语言编写笑脸,怎么使用HTML5中的Canvas绘制笑脸
怎么使用HTML5中的Canvas绘制笑脸 发布时间:2021-02-26 09:33:14 来源:亿速云 阅读:75 作者:清风 这篇"怎么使用HTML5中的Canvas绘制笑脸" ...
- php代码输出笑脸,利用HTML5中的Canvas绘制笑脸的代码
这篇文章主要介绍了利用HTML5中的Canvas绘制一张笑脸的教程,使用Canvas进行绘图是HTML5中的基本功能,需要的朋友可以参考下 今天,你将学习一项称为Canvas(画布)的web技术,以及 ...
- HTML菊花图案绘制,用HTML5中的canvas元素画菊花
用html5中的canvas画出的三种菊花,书上看到的例子,拿来当联系玩. 使用Canvas元素绘制美丽的花朵 var context; var A,n; function btn_onclick() ...
- 使用HTML5中的canvas绘制灰太狼图像
大家好,我是byoneself,本次将为大家分享一下使用HTML5中的canvas绘制一个灰太狼图像,希望对大家有所帮助. 下图是效果图: 以下就是实现的代码: <!DOCTYPE html&g ...
- html5图层重叠,如何在html5中的canvas下实现ps中的叠加效果?
侃侃无极 html5中的canvas本身的API是不存在图层概念的.要想实现实现多图层功能,必须要使用多个canvas对象,不过这些canvas对象,是在内存中的,而不是在html的元素树中.每个ca ...
- 【HTML5】在canvas上绘制简单的2D图形 (+太极图)
canvas(画布) canvas 元素是H5中新增的一个重要元素,专门用来绘制图形.在页面中放置一个canvas元素,就相当于在页面上放置一块画布,可以利用 canvas api 在其中进行图形的描 ...
最新文章
- 企业组网安全如何保障?SDWAN提供怎样的安全服务?
- UidGenerator
- 【LeetCode】0830.较大分组的位置
- javascript中对变量类型的判断
- 适用于ATI卡的GPU计算MD5的小程序源码,基于AMD APP SDK开发
- JavaScript初阶(二)
- 线程池参数到底要怎么配?
- union共用体(联合体)、宏定义、枚举
- MyBatis3详细教程-从入门到精通
- 卸载mySQL数据库
- 如何采集企业信息公示系统
- 经纬度在线查询 地名 批量 查询经纬度 经纬度 批量 查询地名
- 铁通dns服务器地址是多少,电信/网通/铁通dns服务器地址大全
- PS调色类插件哪家强
- 2022年乡村医生考试精选复习题及答案
- 【Web】1326- 深入浅出 Web Audio API
- hexo博客中插入图片失败——解决思路及个人最终解决办法
- 【OpenCV学习】第6课:图像模糊(中值滤波,高斯双边滤波)
- 机器学习(Machine Learning,ML)
- Git 04 ---用Idea合并git分支