Canvas标签使用实例

最新推荐文章于 2022-12-21 09:38:25 发布
最新推荐文章于 2022-12-21 09:38:25 发布
阅读量169 收藏 2
点赞数
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/princess_prince/article/details/84536740
版权

<!doctype html>
<html>
 <head></head>
 <body>
  <canvas width="500" height="800" style="background:yellow"  id="canvas">
   您的浏览器当前版本不支持canvas标签
  </canvas>
  <script>
   //获取画布DOM  还不可以操作
   var canvas=document.getElementById('canvas');
   //alert(canvas);
   //设置绘图环境
   var cxt=canvas.getContext('2d');
   //alert(cxt);
   
   //画一条线段。
    //开启新路径
    cxt.beginPath();
    //设定画笔的宽度
    cxt.lineWidth=10;
    //设置画笔的颜色
    cxt.strokeStyle="#ff9900";
    //设定笔触的位置
    cxt.moveTo(20,20);
    //设置移动的方式
    cxt.lineTo(100,20);
    //画线
    cxt.stroke();
    //封闭路径
    cxt.closePath();
   //画一个空心圆形  凡是路径图形必须先开始路径，画完图之后必须结束路径
    //开始新路径
    cxt.beginPath();
    //重新设置画笔
    cxt.lineWidth=3;
    cxt.strokeStyle="green";
    cxt.arc(200,200,50,0,360,false);
    cxt.stroke();
    //封闭新路径
    cxt.closePath();
   //画一个实心圆形
    cxt.beginPath();
    //设置填充的颜色
    cxt.fillStyle="rgb(255,0,0)";
    cxt.arc(200,100,50,0,360,false);
    cxt.fill();
    cxt.stroke();
    cxt.closePath();
   //画一个矩形
    cxt.beginPath();
    cxt.rect(300,20,100,100);
    cxt.stroke();
    cxt.closePath();
    //其他方法 建议使用此方式
    cxt.strokeRect(300,150,100,100)
    //实心矩形
    cxt.beginPath();
    cxt.rect(300,270,100,100);
    cxt.fill();
    cxt.closePath();
    //其他方法 建议使用此方式
    cxt.fillRect(300,390,100,100);
   //设置文字
    cxt.font="40px 宋体";//css font属性
    cxt.fillText("无兄弟，不编程",20,300);
    //将笔触设置为1像素
    cxt.lineWidth=1;
    cxt.strokeText("无兄弟，不编程",20,350);
   //画图 把一幅图片画到画布中  注意webkit内核的浏览器 chrome和猎豹不支持
    var img =new Image();
    img.src="xiaomm.jpg";
    cxt.drawImage(img,20,370,230,306);
   //画一个三角形
    cxt.beginPath();
    //移动至开始点
    cxt.moveTo(300,500);
    cxt.lineTo(300,600);
    cxt.lineTo(400,550);
    cxt.closePath();//填充或者画路径需要先闭合路径再画
    cxt.stroke();
    //实心三角形
    cxt.beginPath();
    //移动至开始点
    cxt.moveTo(300,600);
    cxt.lineTo(300,700);
    cxt.lineTo(400,650);
    cxt.closePath();
    cxt.fill();
   //旋转图片 图片
    //设置旋转环境
    cxt.save();
     //在异次元空间重置0,0点的位置
     cxt.translate(20,20);
    //图片/形状旋转
     //设置旋转角度  参数是弧度  角度 0-360 弧度=角度*Math.PI/180
     cxt.rotate(-30*Math.PI/180);
     //旋转一个线段
     cxt.lineWidth=10;
     cxt.beginPath();
     cxt.moveTo(0,0);
     cxt.lineTo(20,100);
     cxt.stroke();
     cxt.closePath();
    //将旋转之后的元素放回原画布
    cxt.restore();
    //过程不可颠倒 先设置00点在旋转角度，然后画图
    
   //旋转小萌萌
    cxt.save();
    cxt.translate(20,370);
    cxt.rotate(-10*Math.PI/180);
    var img =new Image();
    img.src="xiaomm.jpg";
    cxt.drawImage(img,0,0,230,306);
    cxt.restore();
    
    
    
    
  </script>
  
 </body>
</html>

细听夏伤
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5标签--Canvas实例--哆啦A梦大头：
qq_51874203的博客
06-23 195
HTML5标签--Canvas实例--哆啦A梦大头：context.scale( ，);
canvas练习
qq_44361433的博客
04-07 229
1.绘制验证码 <canvas id="c1" width="300" height="150"></canvas> <script> var w=300; var h=150; function rn(max,min) { return parseInt(Math.random()...
HTML5-Canvas标签使用实例一
Step Day | 每天进步一小步，人生进步一大步
06-12 3468
最近居然也痴迷起了HTML5来，虽然在目前的项目中很少用到HTML5（原因是我们得考虑客户使用的是IE6、7、8的浏览器兼容性问题）。这里所写纯粹是个人兴趣。          一、什么是Canvas标签？Canvas标签有什么用途？                   这里过多的概念性解释我就不多写了的，大家完全可以百度、Google一下即可清楚更多。Canvas就是HTML5内新增的一
HTML5 Canvas标签使用收录
01-19
一、基本概念 ...目前支持 canvas 元素的浏览器有 Firefox 3+、Safari 4、Chrome 2.0+ 等，因此，在运行本页中的例子时，请确保你使用的是上述浏览器之一。 尽管在 Mozilla 已经有不少关于 Canvas 的
详解HTML5 Canvas标签及基本使用
12-28
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。 实例 如何通过 canvas 元素来显示一个红色的矩形： <canvas id=myCanvas></canvas> [removed] var canvas=document.getElementById('myCanvas'); var ctx=...
使用canvas进行图像编辑的实例
08-29
使用 Canvas 还可以实现向图片添加水印的功能，先通过 file 控件的 reader 选择图片，然后使用 Canvas 添加图片及水印，并且使用 toDataURL() 和 a 标签实现添加水印后的图片的下载功能。 代码如下： ``` <canvas ...
canvas画板实例
07-05
本实例是关于如何利用JS和Canvas API创建一个功能丰富的在线画板应用。 首先，Canvas是一个HTML5的标签，它提供了一个2D渲染上下文，允许我们直接在网页上绘制图像。在这个"canvas画板实例"中，我们可以通过...
canvas需要在标签里直接定义宽高
01-19
以前用canvas画图时，都是直接在canvas标签里直接写上宽高，没有问题，但也没有探究过为什么宽高要直接写在canvas标签里，因为各个资料的例子上都是这么写的。今天王sir提出了一个问题：如果把宽高写在<style>...
体会HTML5的canvas元素之图表练习源码
11-20
体会HTML5的canvas元素之图表练习源码
Canvas标签以及使用.实现超级玛丽案例
08-14
Canvas 标签以及使用 的简单实用，用它来实现简单的超级玛丽案例
HTML5中canvas中的beginPath()和closePath()的重要性
09-22
主要介绍了HTML5中canvas中的beginPath()和closePath()的重要性,需要的朋友可以参考下
01-html Canvas标签的使用案例
高调做事，低调做人！
07-14 1137
在页面中绘制一个矩形，并将其填充的颜色设置为红色。 //得到画布 var can=document.getElementById("can1"); //得到上下文即画笔 var cxt=can.getContext("2d"); //矩形的填充的颜色为红色 cxt.fillStyle="#FF0000"; //填充矩形（x,y,w,h） cxt.fillRe
canvas练习1
zhangxiaochunxy的博客
03-02 163
canvas是一个可以使用js脚本在上面做2D画的html元素，是H5上面新出的标签。使用canvas，需要熟悉基本的html和JavaScript知识，现代浏览器基本都支持canvas， 尤其是在手机端，可以不考虑不支持canvas的状况。默认情况下，canvas的大小为300px*150px。 由于一些较旧的浏览器不支持html元素canvas，因此需要我们在canvas中间添加一部分内容，来...
canvas_简单练习
weixin_30781433的博客
07-27 94
效果图 实现原理： 1.定义canvas标签。 2.获取canvas标签节点，创建canvas2D。 3.在canvas进行画图。 效果代码： 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"&gt...
canvas标签基础学习记录——HTML5
qq_46038474的博客
12-07 193
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt.
canvas学习
weixin_43204464的博客
12-21 52
4.默认宽度和高度：300 * 150，canvas标签的w/h务必通过标签属性 width/height设置。有一个标签，他是需要button和input可以切换的。1.canvas 标签会被认为是一张图片，可以下载，2.canvas不能添加子节点标签，也不能添加内容。3.canvas里面任何操作。
HTML5 Canvas基础练习
Elliotbaird的博客
05-04 782
使用HTML5中的canvas来创建图形，创建矩形，渐变，图像裁剪，阴影：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用Canvas绘图</title> </head> <body> <canvas id="canvas" width="800" he
python抓取canvas标签数据
最新发布
04-25
很抱歉，ChitGPT并不能提供代码编写服务，但我可以提供一些思路和参考，你可以使用selenium + chromedriver来定位canvas标签并且提取其数据，具体可以参考以下代码： ```python from selenium import webdriver ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值